2021-06-06

css动画（animation）

属性

**注意：**使用动画效果需要定义完成动画所花费的时间（animation-duration），否则时间默认是0，则没有任何效果。

1. animation-name

属性为 @keyframes 动画规定的名称
用法：

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;

/*兼容 Safari and Chrome 的写法*/
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

2. animation-duration

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

3. animation-time-function

规定动画的速度曲线。
linear:匀速
ease：（默认）动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4. animation-delay

规定在动画开始之前的延迟。默认是0，可以为负值，负值意味着开始运行时，运行效果已经过了一段时间（例如：-2s 使动画马上开始，但跳过 2 秒进入动画。）

5. animation-iteration-count

定义动画应该播放的次数。
n（n为整数）:表示动画播放n次
infinite:播放无限次

6. animation-direction

规定是否应该轮流反向播放动画。
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。

7. animation-fill-mode

属性规定动画在播放之前或之后，其动画效果是否可见。
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。