前言

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

平移

<div class="js-block move_1"></div>
<style>
.move_1{
    -webkit-animation:move_1 1s;
}
@-webkit-keyframes move_1{
    0%{ -webkit-transform:translateY(-200px); opacity:0;}
}
</style>

<div class="js-block move_2"></div>
<style>
.move_2{
    -webkit-animation:move_2 1s;
}
@-webkit-keyframes move_2{
    0%{ -webkit-transform:translateX(200px); opacity:0;}
}
</style>

<div class="js-block move_3"></div>
<style>
.move_3{
    -webkit-animation:move_3 1s;
}
@-webkit-keyframes move_3{
    0%{ -webkit-transform:translateY(200px); opacity:0;}
}
</style>

<div class="js-block move_4"></div>
<style>
.move_4{
    -webkit-animation:move_4 1s;
}
@-webkit-keyframes move_4{
    0%{ -webkit-transform:translateX(-200px); opacity:0;}
}
</style>

缩放

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

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

<div class="js-block zoom_3"></div>
<style>
.zoom_3{
    -webkit-animation:zoom_3 1s;
}
@-webkit-keyframes zoom_3{
    0%{ -webkit-transform:scaleX(0); opacity:0;}
}
</style>

<div class="js-block zoom_4"></div>
<style>
.zoom_4{
    -webkit-animation:zoom_4 1s;
}
@-webkit-keyframes zoom_4{
    0%{ -webkit-transform:scaleY(0); opacity:0;}
}
</style>

旋转

<div class="js-block rotate_1"></div>
<style>
.rotate_1{
    -webkit-animation:rotate_1 1s;
}
@-webkit-keyframes rotate_1 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(360deg);
  }
}
</style>

<div class="js-block rotate_2"></div>
<style>
.rotate_2{
    -webkit-animation:rotate_2 1s;
    -webkit-transform-origin:0% 0%;
}
@-webkit-keyframes rotate_2 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
  }
}
</style>

<div class="js-block rotate_3"></div>
<style>
.rotate_3{
    -webkit-animation:rotate_3 1s;
    -webkit-transform-origin:100% 0%;
}
@-webkit-keyframes rotate_3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-180deg);
  }
}

</style>

<div class="js-block rotate_4"></div>
<style>
.rotate_4{
    -webkit-animation:rotate_4 1s;
    -webkit-transform-origin:100% 100%;
}
@-webkit-keyframes rotate_4 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-180deg);
  }
}
</style>

<div class="js-block rotate_5"></div>
<style>
.rotate_5{
    -webkit-animation:rotate_5 1s;
    -webkit-transform-origin:0% 100%;
}
@-webkit-keyframes rotate_5 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
  }
}
</style>

<div class="js-block rotate_6"></div>
<style>
.rotate_6{
    -webkit-animation:rotate_6 1s;
    -webkit-transform-origin:-100% -100%;
}
@-webkit-keyframes rotate_6 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
  }
}
</style>

缩放 & 平移

<div class="js-block zoom_move_1"></div>
<style>
.zoom_move_1{
    -webkit-animation:zoom_move_1 1s;
}
@-webkit-keyframes zoom_move_1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(-1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(60px);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
  }
}
</style>

<div class="js-block zoom_move_2"></div>
<style>
.zoom_move_2{
    -webkit-animation:zoom_move_2 1s;
}
@-webkit-keyframes zoom_move_2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(-10px);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
  }
}
</style>

<div class="js-block zoom_move_3"></div>
<style>
.zoom_move_3{
    -webkit-animation:zoom_move_3 1s;
}
@-webkit-keyframes zoom_move_3 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
  }
}
</style>

<div class="js-block zoom_move_4"></div>
<style>
.zoom_move_4{
    -webkit-animation:zoom_move_4 1s;
}
@-webkit-keyframes zoom_move_4 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(-1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(10px);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
  }
}
</style>

<div class="js-block zoom_move_5"></div>
<style>
.zoom_move_5{
    -webkit-animation:zoom_move_5 1s;
}
@-webkit-keyframes zoom_move_5 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(-1000px);
  }
}
</style>

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

旋转 & 缩放

<div class="js-block rotate_zoom_1"></div>
<style>
.rotate_zoom_1{
    -webkit-animation:rotate_zoom_1 1s;
}
@-webkit-keyframes rotate_zoom_1 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg) scale(0);
  }
}
</style>

<div class="js-block rotate_zoom_2"></div>
<style>
.rotate_zoom_2{
    -webkit-animation:rotate_zoom_2 1s;
}
@-webkit-keyframes rotate_zoom_2 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg) scale(2);
  }
}
</style>

<div class="js-block rotate_zoom_3"></div>
<style>
.rotate_zoom_3{
    -webkit-animation:rotate_zoom_3 1s;
    -webkit-transform-origin:30% 30%;
}
@-webkit-keyframes rotate_zoom_3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0);
  }
}
</style>

<div class="js-block rotate_zoom_4"></div>
<style>
.rotate_zoom_4{
    -webkit-animation:rotate_zoom_4 1s;
    -webkit-transform-origin:30% 30%;
}
@-webkit-keyframes rotate_zoom_4 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(2);
  }
}
</style>

旋转 & 平移

<div class="js-block rotate_move_1"></div>
<style>
.rotate_move_1{
    -webkit-animation:rotate_move_1 1s;
}
@-webkit-keyframes rotate_move_1 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(280px) rotate(480deg);
  }
}
</style>

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

<div class="js-block rotate_move_3"></div>
<style>
.rotate_move_3{
    -webkit-animation:rotate_move_3 1s;
}
@-webkit-keyframes rotate_move_3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(30deg) translateX(240px);
  }
}
</style>

<div class="js-block rotate_move_4"></div>
<style>
.rotate_move_4{
    -webkit-animation:rotate_move_4 1s;
}
@-webkit-keyframes rotate_move_4 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(960deg) translateX(300px);
  }
}
</style>

斜切 & 平移

斜切进入

无

<div class="js-block skew_move_1"></div>
<style>
.skew_move_1{
    -webkit-animation:skew_move_1 1s;
    -webkit-transform-origin:0% 100%;
}
@-webkit-keyframes skew_move_1 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(260px) skewX(-24deg);
  }
}
</style>

弹性 & 平移

<div class="js-block bounce_move_1"></div>
<style>
.bounce_move_1{
    -webkit-animation:bounce_move_1 .8s ease-out;
}
@-webkit-keyframes bounce_move_1 {
  0% {
    opacity: 0;
    -webkit-transform:translateY(-440px);
  }
  40%{
      opacity:1;
      -webkit-transform:translateY(0);
  }
  50%{
      -webkit-transform:translateY(-10px);
  }
  60%{
      -webkit-transform:translateY(0);
  }
  70%{
       -webkit-transform:translateY(-2px);
  }
  80%,100%{
      -webkit-transform:translateY(0);
  }
}
</style>

<div class="js-block bounce_move_2"></div>
<style>
.bounce_move_2{
    -webkit-animation:bounce_move_2 .8s ease-out;
}
@-webkit-keyframes bounce_move_2 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(440px);
  }
  40%{
      opacity:1;
      -webkit-transform:translateX(0);
  }
  50%{
      -webkit-transform:translateX(10px);
  }
  60%{
      -webkit-transform:translateX(0);
  }
  70%{
       -webkit-transform:translateX(2px);
  }
  80%,100%{
      -webkit-transform:translateX(0);
  }
}
</style>

<div class="js-block bounce_move_3"></div>
<style>
.bounce_move_3{
    -webkit-animation:bounce_move_3 .8s ease-out;
}
@-webkit-keyframes bounce_move_3 {
  0% {
    opacity: 0;
    -webkit-transform:translateY(440px);
  }
  40%{
      opacity:1;
      -webkit-transform:translateY(0);
  }
  50%{
      -webkit-transform:translateY(10px);
  }
  60%{
      -webkit-transform:translateY(0);
  }
  70%{
       -webkit-transform:translateY(2px);
  }
  80%,100%{
      -webkit-transform:translateY(0);
  }
}
</style>

<div class="js-block bounce_move_4"></div>
<style>
.bounce_move_4{
    -webkit-animation:bounce_move_4 .8s ease-out;
}
@-webkit-keyframes bounce_move_4 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(-440px);
  }
  40%{
      opacity:1;
      -webkit-transform:translateX(0);
  }
  50%{
      -webkit-transform:translateX(-10px);
  }
  60%{
      -webkit-transform:translateX(0);
  }
  70%{
       -webkit-transform:translateX(-2px);
  }
  80%,100%{
      -webkit-transform:translateX(0);
  }
}
</style>

弹性 & 缩放

弹性放大

弹性缩小

<div class="js-block bounce_scale_1"></div>
<style>
.bounce_scale_1{
    -webkit-animation:bounce_scale_1 .8s ease-out;
}
@-webkit-keyframes bounce_scale_1 {
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
  }
  25%{
      opacity:1;
      -webkit-transform:scale(1);
  }
  40%{
      -webkit-transform:scale(0.9);
  }
  55%{
      -webkit-transform:scale(1);
  }
  70%{
       -webkit-transform:scale(0.98);
  }
  85%,100%{
      -webkit-transform:scale(1);
  }
}
</style>

<div class="js-block bounce_scale_2"></div>
<style>
.bounce_scale_2{
    -webkit-animation:bounce_scale_2 1s ease-out;
}
@-webkit-keyframes bounce_scale_2 {
  0% {
    opacity: 0;
    -webkit-transform:scale(2.5);
  }
  25%{
      opacity:1;
      -webkit-transform:scale(1);
  }
  40%{
      -webkit-transform:scale(1.1);
  }
  55%{
      -webkit-transform:scale(1);
  }
  70%{
       -webkit-transform:scale(1.02);
  }
  85%,100%{
      -webkit-transform:scale(1);
  }
}
</style>

弹性 & 自由落体

自由落体

无

<div class="js-block bounce_fall"></div>
<style>
.bounce_fall {
   -webkit-animation: bounce_fall 1s linear;
}
@-webkit-keyframes bounce_fall {
  0% {transform:translateY(-400px);}
  4% {transform:translateY(-395.16px);}
  8% {transform:translateY(-380.64px);}
  12% {transform:translateY(-356.44px);}
  16% {transform:translateY(-322.56px);}
  20% {transform:translateY(-279px);}
  24% {transform:translateY(-225.76px);}
  28% {transform:translateY(-162.84px);}
  32% {transform:translateY(-90.24px);}
  36% {transform:translateY(-7.96px);}
  40% {transform:translateY(-36px);}
  44% {transform:translateY(-66.36px);}
  48% {transform:translateY(-87.04px);}
  52% {transform:translateY(-98.04px);}
  56% {transform:translateY(-99.36px);}
  60% {transform:translateY(-91px);}
  64% {transform:translateY(-72.96px);}
  68% {transform:translateY(-45.24px);}
  72% {transform:translateY(-7.84px);}
  76% {transform:translateY(-14.76px);}
  80% {transform:translateY(-24px);}
  84% {transform:translateY(-23.56px);}
  88% {transform:translateY(-13.44px);}
  92% {transform:translateY(-2.64px);}
  96% {transform:translateY(-6.16px);}
  100% {transform:translateY(0);}
}
</style>

摇摆 & 平移

<div class="js-block swing_move_1"></div>
<style>
.swing_move_1{
    -webkit-animation:swing_move_1 1s;
}
@-webkit-keyframes swing_move_1 {
  0% {
    opacity: 0;
    -webkit-transform:translateY(-480px);
  }
  25%{
    opacity:1;
    -webkit-transform:translateY(40px);
  }
  40%{
      -webkit-transform:translateY(-18px);
  }
  55%{
      -webkit-transform:translateY(8px);
  }
  70%{
      -webkit-transform:translateY(-5px);
  }
  85%{
      -webkit-transform:translateY(2px);
  }
  100%{
      -webkit-transform:translateY(0);
  }
}
</style>

<div class="js-block swing_move_2"></div>
<style>
.swing_move_2{
    -webkit-animation:swing_move_2 1s;
}
@-webkit-keyframes swing_move_2{
  0% {
    opacity: 0;
    -webkit-transform:translateX(480px);
  }
  25%{
    opacity:1;
    -webkit-transform:translateX(-40px);
  }
  40%{
      -webkit-transform:translateX(18px);
  }
  55%{
      -webkit-transform:translateX(-8px);
  }
  70%{
      -webkit-transform:translateX(5px);
  }
  85%{
      -webkit-transform:translateX(-2px);
  }
  100%{
      -webkit-transform:translateX(0);
  }
}
</style>

<div class="js-block swing_move_3"></div>
<style>
.swing_move_3{
    -webkit-animation:swing_move_3 1s;
}
@-webkit-keyframes swing_move_3{
  0% {
    opacity: 0;
    -webkit-transform:translateY(480px);
  }
  25%{
    opacity:1;
    -webkit-transform:translateY(-40px);
  }
  40%{
      -webkit-transform:translateY(18px);
  }
  55%{
      -webkit-transform:translateY(-8px);
  }
  70%{
      -webkit-transform:translateY(5px);
  }
  85%{
      -webkit-transform:translateY(-2px);
  }
  100%{
      -webkit-transform:translateY(0);
  }
}
</style>

<div class="js-block swing_move_4"></div>
<style>
.swing_move_4{
    -webkit-animation:swing_move_4 1s;
}
@-webkit-keyframes swing_move_4{
  0% {
    opacity: 0;
    -webkit-transform:translateX(-480px);
  }
  25%{
    opacity:1;
    -webkit-transform:translateX(40px);
  }
  40%{
      -webkit-transform:translateX(-18px);
  }
  55%{
      -webkit-transform:translateX(8px);
  }
  70%{
      -webkit-transform:translateX(-5px);
  }
  85%{
      -webkit-transform:translateX(2px);
  }
  100%{
      -webkit-transform:translateX(0);
  }
}
</style>