前端面试篇：CSS3动画是怎么实现的？

　　- CSS3动画主要是通过animation这个属性来进行实现，使用动画的时候需要先进行声明动画然后再去调用，哪里需要产生动画效果哪里就使用animation进行调用。

　　- 基本语法

 ```HTML

  <style>

      *{margin:0;padding:0}

      div{

          width:200px;

          height:200px;

          background-color:red;

          /*调用动画*/

          animation:movers 20s linear infinite alternate

      }

      /*声明动画*/

      @keyframes movers{

          form{

              width:200px;

              height:200px;

              background-color:red;

          }

          to{

              width:400px;

              height:400px;

              background-color:green;

              border-radius:50%;

          }

   }

  </style>

  <div></div>

　　- 语法注意事项

　　animation:复合属性

　　animation-name 规定需要绑定到选择器的 keyframe 名称。。

　　animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

　　animation-timing-function 规定动画的速度曲线。

　　animation-delay 规定在动画开始之前的延迟。

　　animation-iteration-count 规定动画应该播放的次数。

　　animation-direction 规定是否应该轮流反向播放动画。

　　form 初始状态

　　to 结束装填

　　可以替换成

　　0% 初始状态

　　100% 结束状态

　　后面的百分比可以称之为关键帧动画

　　更多关于前端培训的问题，欢迎咨询千锋教育在线名师，如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问，获取试听资格来试听我们的课程，在线零距离接触千锋教育大咖名师，让你轻松从入门到精通。