HTML Style animationDirection用法及代码示例

animationDirection属性用于设置或返回动画方向。如果将动画设置为仅放置一次，则此属性无效。

用法:

它返回animationDirection属性。
```
object.style.animationDirection;
```

它用于设置animationDirection属性。

object.style.animationDirection = "normal|reverse|alternate|
alternate-reverse|initial|inherit"

属性值：下面列出了animationDirection属性值：

normal:此属性以正向播放动画。它是默认值。
reverse:此动画属性以相反的方向播放动画。
alternate:此动画属性以交替顺序向前和向后播放动画。
alternate-reverse：此动画属性首先向后播放动画，然后向前播放。
initial:此属性用于将animationDirection属性设置为其默认值。
inherit:此属性用于从其父元素继承animationDirection属性。

范例1：

编程：

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            color:green; 
            font-size:70px; 
            font-weight:bold; 
            position:relative; 
              
             /* Chrome, Safari, Opera */ 
            -webkit-animation:animate 3s infinite; 
            animation:animate 3s infinite; 
        } 
          
        /* Chrome, Safari, Opera */ 
        @-webkit-keyframes animate { 
            from {top:0px;} 
            to {top:200px;} 
        } 
          
        @keyframes animate { 
            from {top:0px;} 
            to {top:200px;} 
        } 
    </style> 
</head> 
  
<body> 
      
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <div id = "GFG"> 
        GeeksforGeeks 
    </div> 
      
    <script> 
    function myGeeks() { 
          
        // Code for Chrome, Safari, and Opera 
        document.getElementById("GFG").style.WebkitAnimationDirection 
                = "normal";  
                  
        document.getElementById("GFG").style.animationDirection 
                = "normal"; 
    } 
    </script> 
</body> 
  
</html>

输出：

示例2：

编程：

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            color:green; 
            font-size:70px; 
            font-weight:bold; 
            position:relative; 
              
             /* Chrome, Safari, Opera */ 
            -webkit-animation:animate 3s infinite; 
            animation:animate 3s infinite; 
        } 
          
        /* Chrome, Safari, Opera */ 
        @-webkit-keyframes animate { 
            from {top:0px;} 
            to {top:200px;} 
        } 
          
        @keyframes animate { 
            from {top:0px;} 
            to {top:200px;} 
        } 
    </style> 
</head> 
  
<body> 
      
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <div id = "GFG"> 
        GeeksforGeeks 
    </div> 
      
    <script> 
    function myGeeks() { 
          
        // Code for Chrome, Safari, and Opera 
        document.getElementById("GFG").style.WebkitAnimationDirection 
                = "reverse";  
                  
        document.getElementById("GFG").style.animationDirection 
                = "reverse"; 
    } 
    </script> 
</body> 
  
</html>

输出：

范例3：

编程：

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            color:green; 
            font-size:70px; 
            font-weight:bold; 
            position:relative; 
              
             /* Chrome, Safari, Opera */ 
            -webkit-animation:animate 3s infinite; 
            animation:animate 3s infinite; 
        } 
          
        /* Chrome, Safari, Opera */ 
        @-webkit-keyframes animate { 
            from {top:0px;} 
            to {top:200px;} 
        } 
          
        @keyframes animate { 
            from {top:0px;} 
            to {top:200px;} 
        } 
    </style> 
</head> 
  
<body> 
      
    <button onclick = "myGeeks()"> 
        Click Here! 
    </

支持的浏览器：下面列出了DOM animationDirection属性支持的浏览器：

谷歌浏览器43.0
Firefox 16.0、5.0 Moz
Safari 9.0
Opera 30.0

相关用法

注：本文由纯净天空筛选整理自chaitanyashah707大神的英文原创作品 HTML | DOM Style animationDirection Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。