前端常见面试题：CSS3动画知道吗？怎么实现的？

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

• 基本语法

  <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%  结束状态
  后面的百分比可以称之为关键帧动画