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（指定正在运行的动画）

使用
html

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

css

.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);
        }
  }