animation-direction

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

概述

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

初始值normal
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性否
计算值as specified
Animation typeNot animatable

语法

Formal syntax:  
animation-direction = 
  <single-animation-direction>#  

<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 (en-US) for examples.

Specifications

Specification
CSS Animations Level 1
# animation-direction

浏览器兼容性

BCD tables only load in the browser

更多