文章目录
animation
animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的
animation
它是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的简写：
.animation {
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}
@keyframes
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}}//or
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}}
- animationName：动画名称，开发人员自己命名；
- percentage：为百分比值，可以添加多个百分比值；
- properties：样式属性名称，例如：color、left、width等等。
animation-name
它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：
.animation {
animation-name: none | IDENT[,none | IDENT]*;
}
animation-duration
它是用来设置动画的持续时间，单位为s，默认值为0：
.animation {
animation-duration: <time>[,<time>]*;}
animation-timing-function
和transition-timing-function类似：
.animation {
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>)]*;
}
animation-delay
它是来设置动画的开始时间，单位是s或者ms，默认值为0：
.animation {
animation-delay: <time>[,<time>]*;
}
animation-iteration-count
它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：
.animation {
animation-iteration-count:infinite | <number> [, infinite | <number>]*;
}
animation-direction
它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：
.animation {
animation-direction: normal | alternate [, normal | alternate]*;
}
animation-play-state
它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：
.animation {
animation-play-state:running | paused [, running | paused]*;
}
总结
关于 CSS3 的动画的三个属性transform、transition、animation我们都介绍完了，让我们回顾一下。transform我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变；transition和animation它们很像 flash 中的补间动画和逐帧动画；transition是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等；animation的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。