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 css @keyframes index { 0% { /* ... */ } 50% { /* ... */ } 100% { /* ... */ } }

另外一种写法是，from - to，from 相当于 0%，to 相当于100%，中间正常添加百分比。 css @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： ```html

Animation

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

---

四、浏览器兼容性