前言

本文将介绍一些常用的CSS动画效果，通过代码的形式让你更好的理解和使用。

摇摆 & 缩放

<div class="js-block swing_scale_1"></div>
<style>
.swing_scale_1{
    -webkit-animation:swing_scale_1 1s ease;
}
@-webkit-keyframes swing_scale_1{
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
  }
  20%{
    opacity:1;
    -webkit-transform:scale(1.2);
  }
  35%{
      -webkit-transform:scale(0.9);
  }
  50%{
      -webkit-transform:scale(1.08);
  }
  65%{
      -webkit-transform:scale(0.96);
  }
  80%{
      -webkit-transform:scale(1.02);
  }
  95%,100%{
      -webkit-transform:scale(1);
  }
}
</style>

<div class="js-block swing_scale_2"></div>
<style>
.swing_scale_2{
    -webkit-animation:swing_scale_2 1s;
}
@-webkit-keyframes swing_scale_2{
  0% {
    opacity: 0;
    -webkit-transform:scale(2.5);
  }
  25%{
    opacity:1;
    -webkit-transform:scale(0.84);
  }
  40%{
      -webkit-transform:scale(1.08);
  }
  55%{
      -webkit-transform:scale(0.94);
  }
  70%{
      -webkit-transform:scale(1.02);
  }
  85%{
      -webkit-transform:scale(0.99);
  }
  100%{
      -webkit-transform:scale(1);
  }
}
</style>

摇摆 & 旋转 & 斜切

摇摆旋转

飞入刹车

<div class="js-block swing_rotate_1"></div>
<style>
.swing_rotate_1{
    -webkit-animation:swing_rotate_1 1s linear;
}
@-webkit-keyframes swing_rotate_1 {
    0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:0; }
    7.61% { transform: matrix3d(0.186, 0.982, 0, 0, -0.982, 0.186, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    11.41% { transform: matrix3d(-0.197, 0.98, 0, 0, -0.98, -0.197, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    15.22% { transform: matrix3d(-0.299, 0.954, 0, 0, -0.954, -0.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    19.82% { transform: matrix3d(-0.21, 0.978, 0, 0, -0.978, -0.21, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    24.32% { transform: matrix3d(-0.069, 0.998, 0, 0, -0.998, -0.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);opacity:1; }
    28.93% { transform: matrix3d(0.025, 1, 0, 0, -1, 0.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    33.43% { transform: matrix3d(0.05, 0.999, 0, 0, -0.999, 0.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    51.55% { transform: matrix3d(-0.008, 1, 0, 0, -1, -0.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    69.77% { transform: matrix3d(0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    87.99% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
</style>

<div class="js-block swing_skew_1"></div>
<style>
.swing_skew_1{
    -webkit-animation:swing_skew_1 1s ease;
    -webkit-transform-origin:0% 100%;
}
@-webkit-keyframes swing_skew_1{
  0% {
    opacity: 0;
    -webkit-transform:translateX(400px) skew(-45deg)
  }
  30%{
    opacity:1;
    -webkit-transform:translateX(0) skew(8deg);
  }
  50%{
    -webkit-transform:translateX(0) skew(-3deg);
  }
  70%{
    -webkit-transform:translateX(0) skew(1deg);
  }
}
</style>

摇摆 & 翻转

纵向翻转

横向翻转

自由翻转

<div class="js-block swing_flip_1"></div>
<style>
.swing_flip_1{
    -webkit-animation:swing_flip_1 1s;
}
@-webkit-keyframes swing_flip_1 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
  }
}
</style>

<div class="js-block swing_flip_2"></div>
<style>
.swing_flip_2{
    -webkit-animation:swing_flip_2 1s;
}
@-webkit-keyframes swing_flip_2{
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
  }
}
</style>

<div class="js-block swing_flip_3"></div>
<style>
.swing_flip_3{
    -webkit-animation:swing_flip_3 1s;
}
@-webkit-keyframes swing_flip_3 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    opacity:0;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    opacity:1;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
  }
}
</style>

回弹 & 平移

<div class="js-block back_move_1"></div>
<style>
.back_move_1{
    -webkit-animation:back_move_1 1s ease;
}
@-webkit-keyframes back_move_1{
  0% {
    opacity: 0;
    -webkit-transform:translateY(-400px);
  }
  45%{
    opacity:1;
    -webkit-transform:translateY(16px);
  }
  90%{
      -webkit-transform:translateY(0);
  }
}
</style>

<div class="js-block back_move_2"></div>
<style>
.back_move_2{
    -webkit-animation:back_move_2 1s ease;
}
@-webkit-keyframes back_move_2{
  0% {
    opacity: 0;
    -webkit-transform:translateX(400px);
  }
  45%{
    opacity:1;
    -webkit-transform:translateX(-16px);
  }
  90%{
      -webkit-transform:translateX(0);
  }
}
</style>

<div class="js-block back_move_3"></div>
<style>
.back_move_3{
    -webkit-animation:back_move_3 1s ease;
}
@-webkit-keyframes back_move_3{
  0% {
    opacity: 0;
    -webkit-transform:translateY(400px);
  }
  45%{
    opacity:1;
    -webkit-transform:translateY(-16px);
  }
  90%{
      -webkit-transform:translateY(0);
  }
}
</style>

<div class="js-block back_move_4"></div>
<style>
.back_move_4{
    -webkit-animation:back_move_4 1s ease;
}
@-webkit-keyframes back_move_4{
  0% {
    opacity: 0;
    -webkit-transform:translateX(-400px);
  }
  45%{
    opacity:1;
    -webkit-transform:translateX(16px);
  }
  90%{
      -webkit-transform:translateX(0);
  }
}
</style>

回弹 & 缩放

回弹放大

回弹缩小

<div class="js-block back_scale_1"></div>
<style>
.back_scale_1{
    -webkit-animation:back_scale_1 1s ease;
}
@-webkit-keyframes back_scale_1{
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
  }
  45%{
    opacity:1;
    -webkit-transform:scale(1.2);
  }
  90%{
      -webkit-transform:scale(1);
  }
}
</style>

<div class="js-block back_scale_2"></div>
<style>
.back_scale_2{
    -webkit-animation:back_scale_2 1s ease;
}
@-webkit-keyframes back_scale_2{
  0% {
    opacity: 0;
    -webkit-transform:scale(2.5);
  }
  45%{
    opacity:1;
    -webkit-transform:scale(0.8);
  }
  90%{
      -webkit-transform:scale(1);
  }
}
</style>

回弹 & 旋转 & 平移

滚车轮

无

<div class="js-block back_rotate_1"></div>
<style>
.back_rotate_1{
    -webkit-animation:back_rotate_1 1s ease;
}
@-webkit-keyframes back_rotate_1{
  0% {
    opacity: 0;
    -webkit-transform:translateX(400px) rotate(360deg);
  }
  50%{
    opacity:1;
    -webkit-transform:translateX(-20px) rotate(-20deg);
  }
}
</style>

弹性果冻

果冻放大

果冻斜切放大

果冻飞入

<div class="js-block jelly_scale_1"></div>
<style>
.jelly_scale_1{
    -webkit-animation:jelly_scale_1 1s linear;
}
@-webkit-keyframes jelly_scale_1 {
  0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:0;}
  3.4% { transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.7% { transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.81% { transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.41% { transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% { transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.61% { transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.11% { transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.52% { transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:1;}
  18.72% { transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.32% { transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.32% { transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% { transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% { transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.93% { transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  35.54% { transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.74% { transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.04% { transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.44% { transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% { transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  59.86% { transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.26% { transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.28% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  85.49% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90.69% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
</style>

<div class="js-block jelly_scale_2"></div>
<style>
.jelly_scale_2 {
    -webkit-animation: jelly_scale_2 1s linear;
}
@-webkit-keyframes jelly_scale_2 {
  0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:0;}
  3.2% { transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.5% { transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.41% { transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.01% { transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.71% { transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.51% { transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.92% { transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.92% { transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:1;}
  25.23% { transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% { transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.43% { transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  34.63% { transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40.14% { transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% { transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  62.36% { transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  81.48% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  84.68% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
</style>

<div class="js-block jelly_move_1"></div>
<style>
.jelly_move_1 {
    -webkit-animation: jelly_move_1 1s linear;
}

@-webkit-keyframes jelly_move_1  {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); }
  2.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1); }
  3.37% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -114.871, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -114.871, 0, 0, 1); }
  3.47% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1); }
  4.58% { -webkit-transform: matrix3d(1.796, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1); transform: matrix3d(1.796, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1); }
  5.69% { -webkit-transform: matrix3d(1.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1); transform: matrix3d(1.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1); }
  5.76% { -webkit-transform: matrix3d(1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1); transform: matrix3d(1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1); }
  7.41% { -webkit-transform: matrix3d(1.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.804, 0, 0, 1); transform: matrix3d(1.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.804, 0, 0, 1); }
  7.51% { -webkit-transform: matrix3d(1.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.454, 0, 0, 1); transform: matrix3d(1.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.454, 0, 0, 1); }
  7.88% { -webkit-transform: matrix3d(1.568, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1); transform: matrix3d(1.568, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1); }
  8.68% { -webkit-transform: matrix3d(1.275, 0, 0, 0, 0, 1.181, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1); transform: matrix3d(1.275, 0, 0, 0, 0, 1.181, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1); }
  10.03% { -webkit-transform: matrix3d(0.929, 0, 0, 0, 0, 1.333, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1); transform: matrix3d(0.929, 0, 0, 0, 0, 1.333, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1); }
  10.85% { -webkit-transform: matrix3d(0.798, 0, 0, 0, 0, 1.398, 0, 0, 0, 0, 1, 0, 18.613, 0, 0, 1); transform: matrix3d(0.798, 0, 0, 0, 0, 1.398, 0, 0, 0, 0, 1, 0, 18.613, 0, 0, 1); }
  11.53% { -webkit-transform: matrix3d(0.723, 0, 0, 0, 0, 1.439, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1); transform: matrix3d(0.723, 0, 0, 0, 0, 1.439, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1); }
  12.22% { -webkit-transform: matrix3d(0.673, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 18.618, 0, 0, 1); transform: matrix3d(0.673, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 18.618, 0, 0, 1); }
  14.18% { -webkit-transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 15.054, 0, 0, 1); transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 15.054, 0, 0, 1); }
  14.37% { -webkit-transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 14.604, 0, 0, 1); transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 14.604, 0, 0, 1); }
  19.23% { -webkit-transform: matrix3d(0.739, 0, 0, 0, 0, 1.371, 0, 0, 0, 0, 1, 0, 3.855, 0, 0, 1); transform: matrix3d(0.739, 0, 0, 0, 0, 1.371, 0, 0, 0, 0, 1, 0, 3.855, 0, 0, 1); }
  20.01% { -webkit-transform: matrix3d(0.764, 0, 0, 0, 0, 1.338, 0, 0, 0, 0, 1, 0, 2.724, 0, 0, 1); transform: matrix3d(0.764, 0, 0, 0, 0, 1.338, 0, 0, 0, 0, 1, 0, 2.724, 0, 0, 1); }
  23.05% { -webkit-transform: matrix3d(0.856, 0, 0, 0, 0, 1.211, 0, 0, 0, 0, 1, 0, 0.036, 0, 0, 1); transform: matrix3d(0.856, 0, 0, 0, 0, 1.211, 0, 0, 0, 0, 1, 0, 0.036, 0, 0, 1); }
  25.75% { -webkit-transform: matrix3d(0.922, 0, 0, 0, 0, 1.114, 0, 0, 0, 0, 1, 0, -0.709, 0, 0, 1); transform: matrix3d(0.922, 0, 0, 0, 0, 1.114, 0, 0, 0, 0, 1, 0, -0.709, 0, 0, 1); }
  26.94% { -webkit-transform: matrix3d(0.946, 0, 0, 0, 0, 1.078, 0, 0, 0, 0, 1, 0, -0.76, 0, 0, 1); transform: matrix3d(0.946, 0, 0, 0, 0, 1.078, 0, 0, 0, 0, 1, 0, -0.76, 0, 0, 1); }
  31.58% { -webkit-transform: matrix3d(1.009, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, -0.406, 0, 0, 1); transform: matrix3d(1.009, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, -0.406, 0, 0, 1); }
  31.73% { -webkit-transform: matrix3d(1.01, 0, 0, 0, 0, 0.986, 0, 0, 0, 0, 1, 0, -0.392, 0, 0, 1); transform: matrix3d(1.01, 0, 0, 0, 0, 0.986, 0, 0, 0, 0, 1, 0, -0.392, 0, 0, 1); }
  37.32% { -webkit-transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1); transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1); }
  38.15% { -webkit-transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.008, 0, 0, 1); transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.008, 0, 0, 1); }
  42.35% { -webkit-transform: matrix3d(1.022, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0.03, 0, 0, 1); transform: matrix3d(1.022, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0.03, 0, 0, 1); }
  48.9% { -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0.009, 0, 0, 1); transform: matrix3d(1.007, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0.009, 0, 0, 1); }
  57.77% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); }
  60.47% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); }
  69.36% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
</style>

震动

<div class="js-block shake_1"></div>
<style>
.shake_1{
    -webkit-animation:shake_1 .2s infinite;
}

@-webkit-keyframes shake_1 {
	2%{ -webkit-transform: translate(-.5px, .5px) rotate(-.5deg);}
	4% { -webkit-transform: translate(2.5px, .5px) rotate(-.5deg);}
	6% { -webkit-transform: translate(-.5px, 1.5px) rotate(1.5deg);}
	8% { -webkit-transform: translate(.5px, .5px) rotate(-.5deg);}
	10% { -webkit-transform: translate(-.5px, -1.5px) rotate(-.5deg);}
	12% { -webkit-transform: translate(.5px, -.5px) rotate(1.5deg);}
	14% { -webkit-transform: translate(1.5px, 2.5px) rotate(-.5deg);}
	16% { -webkit-transform: translate(-.5px, -.5px) rotate(.5deg);}
	18% { -webkit-transform: translate(2.5px, .5px) rotate(.5deg);}
	20% { -webkit-transform: translate(.5px, -1.5px) rotate(-.5deg);}
	22% { -webkit-transform: translate(2.5px, 2.5px) rotate(-.5deg);}
	24% { -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg);}
	26% { -webkit-transform: translate(.5px, 1.5px) rotate(-.5deg);}
	28% { -webkit-transform: translate(1.5px, .5px) rotate(.5deg);}
	30% { -webkit-transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
	32% { -webkit-transform: translate(.5px, .5px) rotate(.5deg);}
	34% { -webkit-transform: translate(.5px, 1.5px) rotate(1.5deg);}
	36% { -webkit-transform: translate(2.5px, -.5px) rotate(1.5deg);}
	38% { -webkit-transform: translate(.5px, 1.5px) rotate(1.5deg);}
	40% { -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg);}
	42% { -webkit-transform: translate(2.5px, -1.5px) rotate(.5deg);}
	44% { -webkit-transform: translate(.5px, -.5px) rotate(.5deg);}
	46% { -webkit-transform: translate(1.5px, -1.5px) rotate(.5deg);}
	48% { -webkit-transform: translate(-1.5px, -.5px) rotate(.5deg);}
	50% { -webkit-transform: translate(2.5px, -1.5px) rotate(1.5deg);}
	52% { -webkit-transform: translate(.5px, 1.5px) rotate(.5deg);}
	54% { -webkit-transform: translate(2.5px, -.5px) rotate(.5deg);}
	56% { -webkit-transform: translate(2.5px, 2.5px) rotate(.5deg);}
	58% { -webkit-transform: translate(2.5px, 1.5px) rotate(-.5deg);}
	60% { -webkit-transform: translate(1.5px, 1.5px) rotate(-.5deg);}
	62% { -webkit-transform: translate(-.5px, .5px) rotate(-.5deg);}
	64% { -webkit-transform: translate(2.5px, 1.5px) rotate(-.5deg);}
	66% { -webkit-transform: translate(-1.5px, .5px) rotate(1.5deg);}
	68% { -webkit-transform: translate(1.5px, -1.5px) rotate(.5deg);}
	70% { -webkit-transform: translate(.5px, .5px) rotate(-.5deg);}
	72% { -webkit-transform: translate(-.5px, 1.5px) rotate(1.5deg);}
	74% { -webkit-transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
	76% { -webkit-transform: translate(2.5px, -.5px) rotate(.5deg);}
	78% { -webkit-transform: translate(2.5px, 2.5px) rotate(.5deg);}
	80% { -webkit-transform: translate(-1.5px, 2.5px) rotate(.5deg);}
	82% { -webkit-transform: translate(-1.5px, -.5px) rotate(.5deg);}
	84% { -webkit-transform: translate(.5px, 1.5px) rotate(-.5deg);}
	86% { -webkit-transform: translate(-.5px, 2.5px) rotate(.5deg);}
	88% { -webkit-transform: translate(2.5px, 2.5px) rotate(1.5deg);}
	90% { -webkit-transform: translate(-.5px, -1.5px) rotate(-.5deg);}
	92% { -webkit-transform: translate(1.5px, .5px) rotate(.5deg);}
	94% { -webkit-transform: translate(-.5px, -.5px) rotate(.5deg);}
	96% { -webkit-transform: translate(1.5px, .5px) rotate(1.5deg);}
	98% { -webkit-transform: translate(.5px, -.5px) rotate(1.5deg);}
	0%,100% { -webkit-transform: translate(0, 0) rotate(0);}
}
</style>

<div class="js-block shake_2"></div>
<style>
.shake_2{
    -webkit-animation:shake_2 .2s infinite;
}
@-webkit-keyframes shake_2 {
	2% { -webkit-transform: translate(-4px, 2px) rotate(1.5deg);}
	4% { -webkit-transform: translate(-8px, 10px) rotate(-1.5deg);}
	6% { -webkit-transform: translate(2px, -6px) rotate(-.5deg);}
	8% { -webkit-transform: translate(10px, 10px) rotate(-1.5deg);}
	10% { -webkit-transform: translate(8px, 4px) rotate(.5deg);}
	12% { -webkit-transform: translate(2px, 6px) rotate(-.5deg);}
	14% { -webkit-transform: translate(10px, -8px) rotate(.5deg);}
	16% { -webkit-transform: translate(-9px, -5px) rotate(3.5deg);}
	18% { -webkit-transform: translate(9px, -9px) rotate(-1.5deg);}
	20% { -webkit-transform: translate(2px, 1px) rotate(1.5deg);}
	22% { -webkit-transform: translate(-4px, 1px) rotate(2.5deg);}
	24% { -webkit-transform: translate(-7px, 4px) rotate(-1.5deg);}
	26% { -webkit-transform: translate(-6px, -1px) rotate(-2.5deg);}
	28% { -webkit-transform: translate(6px, 0px) rotate(-1.5deg);}
	30% { -webkit-transform: translate(-6px, 6px) rotate(3.5deg);}
	32% { -webkit-transform: translate(5px, 7px) rotate(3.5deg);}
	34% { -webkit-transform: translate(-5px, 5px) rotate(3.5deg);}
	36% { -webkit-transform: translate(-8px, -3px) rotate(-2.5deg);}
	38% { -webkit-transform: translate(-3px, 5px) rotate(-2.5deg);}
	40% { -webkit-transform: translate(8px, -4px) rotate(1.5deg);}
	42% { -webkit-transform: translate(2px, -8px) rotate(2.5deg);}
	44% { -webkit-transform: translate(5px, -7px) rotate(-1.5deg);}
	46% { -webkit-transform: translate(8px, -4px) rotate(1.5deg);}
	48% { -webkit-transform: translate(1px, -4px) rotate(.5deg);}
	50% { -webkit-transform: translate(-7px, 7px) rotate(3.5deg);}
	52% { -webkit-transform: translate(7px, -5px) rotate(3.5deg);}
	54% { -webkit-transform: translate(10px, -5px) rotate(1.5deg);}
	56% { -webkit-transform: translate(-1px, -8px) rotate(1.5deg);}
	58% { -webkit-transform: translate(2px, -2px) rotate(-1.5deg);}
	60% { -webkit-transform: translate(-8px, 0px) rotate(2.5deg);}
	62% { -webkit-transform: translate(9px, -5px) rotate(-2.5deg);}
	64% { -webkit-transform: translate(8px, -9px) rotate(.5deg);}
	66% { -webkit-transform: translate(-6px, -7px) rotate(-2.5deg);}
	68% { -webkit-transform: translate(-1px, -4px) rotate(-1.5deg);}
	70% { -webkit-transform: translate(10px, -8px) rotate(-1.5deg);}
	72% { -webkit-transform: translate(3px, 6px) rotate(-2.5deg);}
	74% { -webkit-transform: translate(-1px, 8px) rotate(-.5deg);}
	76% { -webkit-transform: translate(-3px, 7px) rotate(1.5deg);}
	78% { -webkit-transform: translate(9px, 0px) rotate(2.5deg);}
	80% { -webkit-transform: translate(9px, -5px) rotate(3.5deg);}
	82% { -webkit-transform: translate(9px, 8px) rotate(-.5deg);}
	84% { -webkit-transform: translate(-3px, -3px) rotate(-2.5deg);}
	86% { -webkit-transform: translate(-8px, -1px) rotate(3.5deg);}
	88% { -webkit-transform: translate(5px, 2px) rotate(3.5deg);}
	90% { -webkit-transform: translate(5px, 9px) rotate(-.5deg);}
	92% { -webkit-transform: translate(7px, 5px) rotate(1.5deg);}
	94% { -webkit-transform: translate(8px, 8px) rotate(-.5deg);}
	96% { -webkit-transform: translate(2px, 10px) rotate(-2.5deg);}
	98% { -webkit-transform: translate(-5px, 10px) rotate(-2.5deg);}
	0%,100% { -webkit-transform: translate(0, 0) rotate(0);}
}
</style>

<div class="js-block shake_3"></div>
<style>
.shake_3{
    -webkit-animation:shake_3 .1s infinite;
}
@-webkit-keyframes shake_3 {
	2% { -webkit-transform: translate(4px, 0);}
	4% { -webkit-transform: translate(8px, 0);}
	6% { -webkit-transform: translate(7px, 0);}
	8% { -webkit-transform: translate(2px, 0);}
	10% { -webkit-transform: translate(0px, 0);}
	12% { -webkit-transform: translate(7px, 0);}
	14% { -webkit-transform: translate(-6px, 0);}
	16% { -webkit-transform: translate(-5px, 0);}
	18% { -webkit-transform: translate(-8px, 0);}
	20% { -webkit-transform: translate(-9px, 0);}
	22% { -webkit-transform: translate(9px, 0);}
	24% { -webkit-transform: translate(-8px, 0);}
	26% { -webkit-transform: translate(-8px, 0);}
	28% { -webkit-transform: translate(2px, 0);}
	30% { -webkit-transform: translate(10px, 0);}
	32% { -webkit-transform: translate(6px, 0);}
	34% { -webkit-transform: translate(-6px, 0);}
	36% { -webkit-transform: translate(7px, 0);}
	38% { -webkit-transform: translate(-9px, 0);}
	40% { -webkit-transform: translate(-4px, 0);}
	42% { -webkit-transform: translate(-4px, 0);}
	44% { -webkit-transform: translate(1px, 0);}
	46% { -webkit-transform: translate(-2px, 0);}
	48% { -webkit-transform: translate(-4px, 0);}
	50% { -webkit-transform: translate(-2px, 0);}
	52% { -webkit-transform: translate(10px, 0);}
	54% { -webkit-transform: translate(-9px, 0);}
	56% { -webkit-transform: translate(0px, 0);}
	58% { -webkit-transform: translate(-8px, 0);}
	60% { -webkit-transform: translate(-4px, 0);}
	62% { -webkit-transform: translate(7px, 0);}
	64% { -webkit-transform: translate(-1px, 0);}
	66% { -webkit-transform: translate(-7px, 0);}
	68% { -webkit-transform: translate(1px, 0);}
	70% { -webkit-transform: translate(-5px, 0);}
	72% { -webkit-transform: translate(0px, 0);}
	74% { -webkit-transform: translate(-4px, 0);}
	76% { -webkit-transform: translate(5px, 0);}
	78% { -webkit-transform: translate(2px, 0);}
	80% { -webkit-transform: translate(2px, 0);}
	82% { -webkit-transform: translate(-1px, 0);}
	84% { -webkit-transform: translate(9px, 0);}
	86% { -webkit-transform: translate(-6px, 0);}
	88% { -webkit-transform: translate(8px, 0);}
	90% { -webkit-transform: translate(3px, 0);}
	92% { -webkit-transform: translate(10px, 0);}
	94% { -webkit-transform: translate(-4px, 0);}
	96% { -webkit-transform: translate(-6px, 0);}
	98% { -webkit-transform: translate(7px, 0);}
	0%,100% { -webkit-transform: translate(0, 0);}
}
</style>

<div class="js-block shake_4"></div>
<style>
.shake_4{
    -webkit-animation:shake_4 .1s infinite;
}
@-webkit-keyframes shake_4 {
	2% { -webkit-transform: translate(0, -2px); }
	4% { -webkit-transform: translate(0, -2px);}
	6% { -webkit-transform: translate(0, 2px);}
	8% { -webkit-transform: translate(0, 9px);}
	10% { -webkit-transform: translate(0, 3px);}
	12% { -webkit-transform: translate(0, 4px);}
	14% { -webkit-transform: translate(0, -8px);}
	16% { -webkit-transform: translate(0, -8px);}
	18% { -webkit-transform: translate(0, -6px);}
	20% { -webkit-transform: translate(0, 5px);}
	22% { -webkit-transform: translate(0, 5px);}
	24% { -webkit-transform: translate(0, -8px);}
	26% { -webkit-transform: translate(0, -4px);}
	28% { -webkit-transform: translate(0, 2px);}
	30% { -webkit-transform: translate(0, -1px);}
	32% { -webkit-transform: translate(0, 1px);}
	34% { -webkit-transform: translate(0, -7px);}
	36% { -webkit-transform: translate(0, -7px);}
	38% { -webkit-transform: translate(0, 2px);}
	40% { -webkit-transform: translate(0, -1px);}
	42% { -webkit-transform: translate(0, 8px);}
	44% { -webkit-transform: translate(0, -5px);}
	46% { -webkit-transform: translate(0, -8px);}
	48% { -webkit-transform: translate(0, -1px);}
	50% { -webkit-transform: translate(0, 1px);}
	52% { -webkit-transform: translate(0, 1px);}
	54% { -webkit-transform: translate(0, -4px);}
	56% { -webkit-transform: translate(0, 4px);}
	58% { -webkit-transform: translate(0, 3px);}
	60% { -webkit-transform: translate(0, -7px);}
	62% { -webkit-transform: translate(0, 4px);}
	64% { -webkit-transform: translate(0, 0px);}
	66% { -webkit-transform: translate(0, -5px);}
	68% { -webkit-transform: translate(0, -2px);}
	70% { -webkit-transform: translate(0, -4px);}
	72% { -webkit-transform: translate(0, 9px);}
	74% { -webkit-transform: translate(0, -3px);}
	76% { -webkit-transform: translate(0, -4px);}
	78% { -webkit-transform: translate(0, -9px);}
	80% { -webkit-transform: translate(0, -8px);}
	82% { -webkit-transform: translate(0, -6px);}
	84% { -webkit-transform: translate(0, 9px);}
	86% { -webkit-transform: translate(0, -4px);}
	88% { -webkit-transform: translate(0, -9px);}
	90% { -webkit-transform: translate(0, -2px);}
	92% { -webkit-transform: translate(0, 7px);}
	94% { -webkit-transform: translate(0, -1px);}
	96% { -webkit-transform: translate(0, 7px);}
	98% { -webkit-transform: translate(0, -1px);}
	0%,100% { -webkit-transform: translate(0, 0);}
}
</style>

<div class="js-block shake_5"></div>
<style>
.shake_5{
    -webkit-animation:shake_5 .1s infinite;
}
@-webkit-keyframes shake_5{
	2% { -webkit-transform:rotate(3.5deg);}
	4% { -webkit-transform:rotate(-.5deg);}
	6% { -webkit-transform:rotate(-1.5deg);}
	8% { -webkit-transform:rotate(4.5deg);}
	10% { -webkit-transform:rotate(6.5deg);}
	12% { -webkit-transform:rotate(.5deg);}
	14% { -webkit-transform:rotate(-4.5deg);}
	16% { -webkit-transform:rotate(5.5deg);}
	18% { -webkit-transform:rotate(-6.5deg);}
	20% { -webkit-transform:rotate(1.5deg);}
	22% { -webkit-transform:rotate(-5.5deg);}
	24% { -webkit-transform:rotate(-4.5deg);}
	26% { -webkit-transform:rotate(-.5deg);}
	28% { -webkit-transform:rotate(7.5deg);}
	30% { -webkit-transform:rotate(-1.5deg);}
	32% { -webkit-transform:rotate(4.5deg);}
	34% { -webkit-transform:rotate(5.5deg);}
	36% { -webkit-transform:rotate(1.5deg);}
	38% { -webkit-transform:rotate(-2.5deg);}
	40% { -webkit-transform:rotate(6.5deg);}
	42% { -webkit-transform:rotate(4.5deg);}
	44% { -webkit-transform:rotate(2.5deg);}
	46% { -webkit-transform:rotate(4.5deg);}
	48% { -webkit-transform:rotate(-5.5deg);}
	50% { -webkit-transform:rotate(-6.5deg);}
	52% { -webkit-transform:rotate(-4.5deg);}
	54% { -webkit-transform:rotate(2.5deg);}
	56% { -webkit-transform:rotate(-5.5deg);}
	58% { -webkit-transform:rotate(-5.5deg);}
	60% { -webkit-transform:rotate(-6.5deg);}
	62% { -webkit-transform:rotate(6.5deg);}
	64% { -webkit-transform:rotate(-1.5deg);}
	66% { -webkit-transform:rotate(-5.5deg);}
	68% { -webkit-transform:rotate(-2.5deg);}
	70% { -webkit-transform:rotate(6.5deg);}
	72% { -webkit-transform:rotate(3.5deg);}
	74% { -webkit-transform:rotate(3.5deg);}
	76% { -webkit-transform:rotate(-2.5deg);}
	78% { -webkit-transform:rotate(-6.5deg);}
	80% { -webkit-transform:rotate(1.5deg);}
	82% { -webkit-transform:rotate(4.5deg);}
	84% { -webkit-transform:rotate(.5deg);}
	86% { -webkit-transform:rotate(3.5deg);}
	88% { -webkit-transform:rotate(5.5deg);}
	90% { -webkit-transform:rotate(7.5deg);}
	92% { -webkit-transform:rotate(-5.5deg);}
	94% { -webkit-transform:rotate(7.5deg);}
	96% { -webkit-transform:rotate(-2.5deg);}
	98% { -webkit-transform:rotate(6.5deg);}
	0%,100% { -webkit-transform:rotate(0);}
}
</style>

<div class="js-block shake_6"></div>
<style>
.shake_6{
    -webkit-animation:shake_6 .1s infinite;
}
@-webkit-keyframes shake_6 {
	10% {
		-webkit-transform: translate(5px, 4px) rotate(-.5deg);
		opacity: .32
	}
	20% {
        -webkit-transform: translate(-1px, 2px) rotate(.5deg);
		opacity: .63
	}
	30% {
        -webkit-transform: translate(1px, 1px) rotate(1.5deg);
		opacity: .49
	}
	40% {
        -webkit-transform: translate(3px, -1px) rotate(1.5deg);
		opacity: .81
	}
	50% {
        -webkit-transform: translate(1px, -2px) rotate(-.5deg);
		opacity: .97
	}
	60% {
        -webkit-transform: translate(-2px, -4px) rotate(2.5deg);
		opacity: .7
	}
	70% {
        -webkit-transform: translate(-3px, -2px) rotate(1.5deg);
		opacity: .99
	}
	80% {
        -webkit-transform: translate(3px, -1px) rotate(.5deg);
		opacity: .92
	}
	90% {
        -webkit-transform: translate(-4px, -4px) rotate(-.5deg);
		opacity: .01
	}
	0%,100% {
        -webkit-transform: translate(0, 0) rotate(0);
	}
}
</style>

其他

<div class="js-block anima_jelly"></div>
<style>
.anima_jelly {
    -webkit-animation: anima_jelly 2s infinite;
}

@-webkit-keyframes anima_jelly {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  15% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  20% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  25% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  32.5% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  37.5% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  50% ,100%{
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
</style>

<div class="js-block anima_swing"></div>
<style>
.anima_swing{
    -webkit-animation:anima_swing 2s infinite;
    -webkit-transform-origin:50% 0%;
}

@-webkit-keyframes anima_swing {
  30% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
  }
  60% {
    -webkit-transform: rotate(-2deg);
  }
  70% {
    -webkit-transform: rotate(0deg);
  }
}
</style>

<div class="js-block anima_wobble"></div>
<style>
.anima_wobble{
    -webkit-animation:anima_wobble 2s infinite;
}

@-webkit-keyframes anima_wobble{
  7.5% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
  }
  15% {
    -webkit-transform: translateX(20%) rotate(3deg);
  }
  22.5% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
  }
  30% {
    -webkit-transform: translateX(10%) rotate(2deg);
  }
  37.5% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
  }
  50%{
      -webkit-transform: translateX(0) rotate(0deg)
  }
}
</style>

<div class="js-block anima_tada"></div>
<style>
.anima_tada{
    -webkit-animation:anima_tada 2s infinite;
}
@-webkit-keyframes anima_tada {
  0% {
    -webkit-transform: scale(1);
  }
  5%,10% {
    -webkit-transform: scale(.8) rotate(-5deg);
  }
  15%,25%,35%,45% {
    -webkit-transform: scale(1.1) rotate(3deg);
  }
  20%,30%,40% {
    -webkit-transform: scale(1.1) rotate(-3deg);
  }
  50% ,100%{
    -webkit-transform: scale(1);
  }
}
</style>

<div class="js-block anima_clock"></div>
<style>
.anima_clock{
    -webkit-animation:anima_clock 2s ease-in-out infinite;
    -webkit-transform-origin:50% -300%;
}
@-webkit-keyframes anima_clock {
  0% ,100%{
    -webkit-transform:rotate(-30deg);
  }
  50% {
    -webkit-transform:rotate(30deg);
  }
}
</style>