css3 animation

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! 用css也可以写出漂亮的动画，使用keyframe来指定css属性随着时间的变化。animation类似与transition，因为它们都是随时间改变css属性的。主要区别是，transition是当值改变时触发，animation实在animation属性被应用后明确的执行。

关键帧(@keyframes) 规则

关键帧被用于在动画过程中指定用于在各个点的动画属性的值。关键帧指定了动画的一个周期的行为，动画可以迭代一次或多次.一个@keyframes规则包含了关键字@keyframes，然后跟着标识符给出动画的名称（它会被animation-name引用到），最后是一组样式规则（由大括号分隔）。为了确定该组的关键帧，所有的选择器的值按时间递增顺序排序。如果有任何重复，那么@keyframes规则内指定的最后一个关键帧将被用于提供那时关键帧的信息。如果有多个关键帧指定了相同的关键帧选择器值时，在@keyframes规则中不会重叠。

语法

@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

取值

• identifier：identifier定义一个动画名称
• keyframes-blocks：定义动画在每个阶段的样式，即帧动画。

animation 属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• animation-name：规定需要绑定到选择器的 keyframe 名称。
• animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function：规定动画的速度曲线。
• animation-delay：规定在动画开始之前的延迟。
• animation-iteration-count：规定动画应该播放的次数(infinite或者是数字)。
• animation-direction：规定是否应该轮流反向播放动画。
• animation-fill-mode：检索或设置对象动画时间之外的状态。
• animation-play-state：检索或设置对象动画的状态。

animation-direction

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

• normal：正常方向
• reverse: 反方向运行(从100%到0%)
• alternate：动画先正常运行再反方向运行，并持续交替运行
• alternate-reverse：动画先反运行再正方向运行，并持续交替运行

alternate 的例子

.animation-1 {
	position: relative;
	width: 90px;
	height: 90px;
	animation: myfirst 5s infinite;
	-webkit-animation: myfirst 5s infinite; /* Chrome, Safari, Opera */
	-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
	animation-direction: alternate;
}

@-webkit-keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    100% {background: yellow; left: 80%; top: 0px;}
}

@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    100% {background: yellow; left: 80%; top: 0px;}
}

<div class="animation-1"></div>

animation-play-state

animation-play-state: running | paused

属性规定动画正在运行还是暂停。

animation-fill-mode

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

• none：默认值。不设置对象动画之外的状态
• forwards：设置对象状态为动画结束时的状态
• backwards：设置对象状态为动画开始时的状态
• both：设置对象状态为动画结束或开始的状态