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

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

文档标签和贡献者

 此页面的贡献者: easthing, mimimic, teoli, Sebastianz, fishenal
 最后编辑者: easthing,