CSS3动画属性之Animation

一、Animation 属性（动画）

Animation 是 CSS3 属性中，除了 transform、transiton 之外的一个动画属性。

具体有：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。

---

二、庖丁解牛

2.1 animation-name

语法： animation-name: none | index; 规定需要绑定到选择器的 keyframe 名称。

keyframe 关键帧

可以为动画变化的关键位置设置一定的顺序。

它的规则是 @keyframes 名称 {...} （注意要加 s，不然无法识别规则。）

有两种写法，一种是 0% - 100%，中间可以创建多个百分比给元素加上动画效果。

假设自定义 keyfram 名称为：index

@keyframes index {
    0% {
        /* ... */
    }
    50% {
        /* ... */
    }
    100% {
        /* ... */
    }
}
复制代码

另外一种写法是，from - to，from 相当于 0%，to 相当于100%，中间正常添加百分比。

@keyframes index {
    from {
        /* ... */
    }
    50% {
        /* ... */
    }
    to {
        /* ... */
    }
}
复制代码

2.2 animation-duration

语法： animation-duration: time;

规定完成动画所花费的时间**（持续时间）**，单位为秒或毫秒。

2.3 animation-timing-function

语法： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)]*

规定动画的速度曲线。

2.4 animation-delay

语法： animation-delay: time;

规定在动画开始之前的延迟时间，单位为秒或毫秒。

2.5 animation-iteration-count （迭代次数）

语法： animation-iteration-count: infinite | number;

规定动画应该反复播放的次数**（迭代次数）**。

2.6 animation-direction （播放方向）

语法： animation-direction: normal | reverse | alternate | alternate-reverse;

规定动画播放的方向。

normal：默认值，正向播放。

reverse：反向播放。

alternate：偶数次反向播放、奇数次正向播放。

alternate-reverse：奇数次反向播放、偶数次正向播放。

2.7 animation-fill-mode （填充模式）

语法： animation-fill-mode: none | forwards | backwards | both;

规定动画在播放之前或之后，其动画效果是否可见。

none：不改变默认行为。

forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both：向前和向后填充模式都被应用。

2.8 animation-play-state （播放状态）

语法： animation-play-state: running | paused

规定动画正在运行还是暂停，即控制动画播放状态。

running：默认值，动画正常播放。

paused：动画暂停。

---

三、小试牛刀

html：

<div class="box">Animation</div>
复制代码

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: index 2s ease-in .2s 3 normal both;
}
/* @keyframes index {
    0% {
        width: 200px;
    }
    50% {
        height: 200px;
    }
    100% {
        transform: rotate(180deg)
    }
} */
@keyframes index {
    from {
        width: 200px;
    }
    50% {
        height: 200px;
    }
    to {
        transform: rotate(180deg);
    }
}
复制代码

---

四、浏览器兼容性