css3动画系列之animation 属性
animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法：
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state: paused|running;
下面详细介绍下各动画属性的用法：
1、animation-name：规定需要绑定到选择器的 keyframe 名称
语法：animation-name: keyframename|none;
| keyframename | 规定需要绑定到选择器的 keyframe 的名称。 |
| none | 规定无动画效果（可用于覆盖来自级联的动画）。 |
2、animation-duration：定义动画完成一个周期所需要的时间，以秒或毫秒计。
语法：animation-duration: time;
| time | 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。 |
3、animation-timing-function：规定动画的速度曲线。
animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
语法：animation-timing-function: value;
| linear | 动画从头到尾的速度是相同的。 | |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | |
| ease-in | 动画以低速开始。 | |
| ease-out | 动画以低速结束。 | |
| ease-in-out | 动画以低速开始和结束。 | |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
4、animation-delay:规定动画开始之前的延迟。
语法：animation-delay: time;
| time | 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。 |
5、animation-iteration-count:定义动画的播放次数。
语法：animation-iteration-count: n|infinite;
| n | 定义动画播放次数的数值。 |
| infinite | 规定动画应该无限次播放。 |
6、animation-direction：定义是否应该轮流反向播放动画。
语法：animation-direction: normal 或 alternate
normal默认值。动画应该正常播放。alternate动画应该轮流反向播放。
简写例子：
div{
width: 200px;
height: 200px;
margin:0 auto;
background:red;
animation:case 5s linear 1s infinite alternate;
}
@keyframes case
{
from{ background:red }
to{ background:blue }
}
7、animation-play-state 属性规定动画正在运行还是暂停。
语法：animation-play-state: paused|running;
| paused | 规定动画已暂停。 |
| running | 规定动画正在播放。 |