CSS3 animation（动画） 属性

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法

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

值 1	说明
animation-name	规定需要绑定到选择器的keyframe名称。
animation-duration	规定动画所花费的时间，以秒或毫秒计
animation-timing-funcion	规定动画时的速度曲线
animation-delay	规定动画开始前的延迟
animation-iteration-count	规定动画播放的次数
animation-direction	规定是否应该轮流反向播放动画
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。

初始值

• animation-name: none
• animation-duration: 0s
• animation-timing-function: ease
• animation-delay: 0s
• animation-iteration-count: 1
• animation-direction: normal
• animation-fill-mode: none
• animation-play-state: running

animation-name属性

为 @keyframes 动画指定一个名称

语法

animation-name: keyframename|none;

为 @keyframes 动画指定一个名称：：
animation-name:mymove;
-webkit-animation-name:mymove; /* Safari 和 Chrome */

animation-duration 属性

定义动画完成一个周期需要多少秒或毫秒。 语法 animation-duration: time;

div
{
	animation:mymove infinite;
	animation-duration:2s;
	/* Safari and Chrome */
	-webkit-animation:mymove infinite;
	-webkit-animation-duration:2s;
}

@keyframes mymove
{
	from {opacity:1;}
	to {opacity:0;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {opacity:1;}
	to {opacity:0;}
}

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 的数值。

从开始到结束以相同的速度播放动画:
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

animation-delay 属性

animation-delay 属性定义动画什么时候开始。 animation-delay 值单位可以是秒（s）或毫秒（ms）。 提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

等待两秒，然后开始动画：
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */

animation-iteration-count 属性 animation-iteration-count属性定义动画应该播放多少次。 语法 animation-iteration-count: value; value可取具体数值n，或者infinite（无限次）

播放三次动画：
animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/

animation-direction 属性

animation-direction 属性定义是否循环交替反向播放动画。 注意：如果动画被设置为只播放一次，该属性将不起作用。 CSS 语法 animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit; 属性值

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

先执行一遍动画，然后再反向执行一遍动画：
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */

animation-fill-mode 属性

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

CSS 语法

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

属性值

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

把物体动画地从一个地方移动到另一个地方，并让它停留在那里：
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */

语法

animation-play-state: paused|running; paused 指定暂停动画 running 指定正在运行的动画

animation-play-state 属性

animation--play-state属性指定动画是否正在运行或已暂停。 注意：在JavaScript中使用此属性在一个周期中暂停动画。

暂停动画：
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */