CSS |动画方向属性

CSS 中的animation-direction 属性用于定义动画的方向。动画的方向应该是向前、向后或交替循环。

句法：

animation-direction: normal|reverse|alternate|alternate-reverse|
initial|inherit;

属性值： animation-direction 属性如下：
normal：此动画属性向前播放动画。它是默认值。

• 句法：

  animation-direction: normal; 

• 例子：

   
   
       
          
           
       
       
          
  GeeksforGeeks
   
          
  animation-direction property
   
          
  This text is normal.
   
       
                                       
  

• 输出：
  

reverse：此动画属性以相反的方向播放动画。

• 句法：

  animation-direction: reverse;

• 例子：

   
   
       
          
           
       
       
          
  GeeksforGeeks
   
          
  animation-direction property
   
          
  This text is reverse.
   
       
                                       
  

• 输出：
  

交替：此动画属性首先向前播放动画，然后向后播放。

• 句法：

  animation-direction: alternate; 

• 例子：

   
   
       
          
           
       
       
          
  GeeksforGeeks
   
          
  animation-direction property
   
          
  This text is alternate.
   
       
                                       
  

• 输出：
  

交替反转：此动画属性先向后播放动画，然后向前播放。

• 句法：

  animation-direction: alternate-reverse;

• 例子：

   
   
       
          
           
       
       
          
  GeeksforGeeks
   
          
  animation-direction property
   
          
  This text is alternate-reverse.
   
       
                                       
  

• 输出：
  

initial：该属性用于将动画属性设置为其默认值。

继承：该属性用于从其父元素继承动画属性。

支持的浏览器： animation-direction 属性支持的浏览器如下：

• 谷歌浏览器 43.0
• 浏览器 10.0
• 火狐 16.0
• 歌剧 30.0
• Safari 9.0