animation

作用

实现简单动画。

语法

animation: name duration timing-function delay iteration-count direction;

其中，

• name: 需要绑定的keyframe名称（其中规定了位置从哪儿到哪儿）
• duration: 规定整个过程花费时间。（单位：s/ms）
• timing-function: 整个过程的速度曲线（先快后慢ease-out、先慢后快ease-in、匀速linear等）
• delay: 动画开始之前的延迟。（单位：s/ms）
• iteration-count： 动画循环次数。（无限infinite、自定义次数n）
• direction： 是否轮流反方向播放。（normal正常播放、alternate轮流反方向播放）

举个例子

// html部分
 <div class="move"></div>

// css部分
@keyframes mymove{
    from{left: 0;}
    to{left: 80%;}
}
.move{
  height: 100px;
  width: 100px;
  position: relative;
  background: red;
  animation: mymove 5s infinite alternate linear;
}

其中，

1. 注意@keyframes的用法，mymove就是animation中的name值，from规定起始位置，to规定结束位置。
2. 注意一定要设置相对定位。
3. 对于其中，参数位置的要求并没有十分严格，也就是说animation中顺序可以不按照语法中的顺序来写。