css动画之animation

语法：

• animation-name 指定要绑定到选择器的关键帧的名称
• animation-duration 动画指定需要多少秒或毫秒完成
• animation-timing-function 设置动画将如何完成一个周期
  linear（从开始到结束速度一致）| ease（默认。动画以低速开始，然后加快，在结束前变慢。）| ease-in（动画以低速开始。）| ease-out（动画以低速结束。）| ease-in-out（动画以低速开始和结束。）
• animation-delay 设置动画在启动前的延迟间隔。
• animation-iteration-count 定义动画的播放次数。 number | infinite（无限次）
• animation-direction 指定是否应该轮流反向播放动画。 alternate （是）
• animation-fill-mode 规定当动画不播放时 none| forwards（动画结束后）| backwards（动画结束前）| both（动画结束前或后）
• animation-play-state 指定动画是否正在运行或已暂停。 paused（指定暂停动画）| running（指定正在运行的动画）

使用

<div class="box"></div>

.box {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      border-radius: 50%;
      background-color: #00b3f1;
       /* 无限次执行move动画，并且轮流反向播放动画 */
      animation: move 2s infinite alternate;
  }
        
  @keyframes move {
     /*
     下面两种方式达到的效果一样
      from {
           transform: scale(1);
      }
      to {
          transform: scale(2);
      }
      */
      0% {
          transform: scale(1);
      }
      100% {
          transform: scale(2);
        }
  }