Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <title>Wiggle</title>
</head>
<body>
  
  <div class="wiggler">
    <div class="wiggle">?</div>
    <div class="wiggle">?</div>
    <div class="wiggle">?</div>
    <div class="wiggle">?</div>
  </div>
</body>
</html>
 
html, body
  min-height 100%
  background hsl(25, 100, 50)
  display flex
  justify-content center
.wiggler
  margin auto
.wiggle
  position relative
  top 0
  display inline-block
  width 50px
  height 50px
  background #353535
  border-radius 3px
  
  font-size 24px
  color #eee
  font-weight bold
  font-family sans-serif
  line-height 50px
  text-align center
  animation wiggle 1.5s ease-in-out infinite
  transition all 0.2s
.wiggle:not(:first-child)
  margin-left 25px
.wiggle:hover
  cursor pointer
  background #454545
  top -3px
.wiggle:nth-child(2)
  animation-delay -0.1s
.wiggle:nth-child(3)
  animation-delay -0.2s
.wiggle:nth-child(4)
  animation-delay -0.3s
@keyframes wiggle
  0%
    transform rotate(5deg)
  50%
    transform rotateZ(-5deg)
  100%
    transform rotateZ(5deg)
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers