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-countbackwards动画将应用在 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 */