CSS animation-direction 属性指定了动画应遵循的方向:向前、向后或在这两个方向之间交替,创建来回移动。
使用速记属性动画是一次配置所有动画属性的一种常见且简单的方法。
语法
值 | 描述 |
---|---|
normal | 这是默认设置,使用此值时,动画将向前推进。 |
reverse | 此值使动画向后方向前进。 |
alternate | 此值使动画首先向前推进,然后向后方向前进 |
alternate-reverse | 此值使动画首先向后方向前进,然后向向前前进。 |
CSS animation-direction 属性示例
下面列出的示例将说明具有不同值的动画方向属性。
向前移动动画
以下示例演示了 animation-direction,其值照常存在。
在这种情况下,动画通常沿正向移动播放。盒子开始向右移动。
例
向后移动动画
以下示例演示了 animation-direction,值为 reverse。
在这种情况下,动画向后移动。这里考虑的盒子向后移动。
前后运动动画
以下示例演示了 animation-direction,并将值作为备用值。
在这种情况下,动画首先向前移动,然后向后移动。这里考虑的盒子在前半个周期中向前移动,然后在后半个周期中向后移动。
来回运动动画
以下示例演示了 animation-direction,其值为 alternate-reverse。
在这种情况下,动画首先向后移动,然后开始向前移动。这里考虑的盒子首先向后移动,然后向前移动。
支持的浏览器
属性 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |