animation-direction

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定

初始值normal
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性否
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax:  <single-animation-direction>#
where 
<single-animation-direction> = normal | reverse | alternate | alternate-reverse


animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

值

normal
每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse
反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse
反向交替， 反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

例子

See CSS animations for examples.

Specifications

Specification Status Comment
CSS Animations
animation-direction		 Working Draft For the two new values, see the W3C discussion.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)		 10 12-o
12.10 #		 4.0-webkit
reverse 19 16.0 (16.0) 10 未实现 未实现
alternate-reverse 19 16.0 (16.0) 10 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)		 ? ? ?
reverse 未实现 (Yes)-webkit 16.0 (16.0) ? ? 未实现
alternate-reverse ? (Yes)-webkit 16.0 (16.0) ? ? ?

See also

相关主题