animation-direction

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

概述

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

初始值normal
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序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
反向交替, 反向开始交替
The animation plays backward on the first play-through, then forward on the next, then continues to alternate. The count to determinate if it is an even or an odd iteration starts at one.

例子

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

文档标签和贡献者

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