iPhoneやiPadのブルブル震えるようなアイコンをCSS3で再現する。(MIT LICENSE)

shaky_ios_icon.sass

@-webkit-keyframes shaky_animation
  0%
    +transform(rotate(0))
  25%
    +transform(rotate(3deg))
  50%
    +transform(rotate(0))
  75%
    +transform(rotate(-3deg))

.shaky_icon
  +animation(shaky_animation .2s infinite)

shaky_iso_icon.css

@-webkit-keyframes shaky_animation {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  25% {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  50% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  75% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
}

.shaky_icon {
  -webkit-animation: shaky_animation 0.2s infinite;
  -moz-animation: shaky_animation 0.2s infinite;
  animation: shaky_animation 0.2s infinite;
}