简介
CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性值，
支持的浏览器
目前支持application cache的浏览器如下：
- n IE 10+
- n Firefox 12+
- n Chome 19+
- n Safari 5.1+
- n Opera1 12+
- n Android browser 4.0+
- n Ios safari 3.2+
语法
使用animation创建动画主要分两步：
1， 使用Keyframes创建关键帧集合。
2， 在元素中通过animation-name属性引用关键帧集合，并设置其他的animation属性来辅助。浏览器将根据设置的持续时间，延时，速度曲线等来平滑过度关键帧集合中的关键帧，形成动画。
Keyframes语法：
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
Percentage 用百分号表示，整个动画过程的时间切片。其中from和to可以分别用0%和100%表示。Properties:Properties value和正常的设置css属性一样。
Animation相关属性
- n animation-name
- n animation-duration
- n animation-timing-function
- n animation-delay
- n animation-iteration-count
- n animation-direction
- n animation-play-state
| 属性名 | 参数要求 | 默认值 | 描述 | . |
|---|---|---|---|---|
| animation-name | 对应的关键帧集名 | none | 关键帧集名 | . |
| animation-duration | 单位秒 | 0s | 动画持续时间 | . |
| animation-timing-function | 取值范围同transition的timing-function：ease linear ease-in ease-out ease-in-out step-start step-end steps(start end ) cubic-bezier（num1 num2 num3 num4） | ease | 速率曲线 | . |
| animation-delay | 单位秒 | 0s | 延迟时间 | . |
| animation-iteration-count | 数字 | 1 | 循环播放次数 | . |
| animation-direction | normal:正常播放 alternate:偶数次顺播，奇数次反播 | normal | 播放顺序 | . |
| animation-play-state | running :播放 paused 暂停 | running | 播放状态 | . |
Demo
动画111111111111111