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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。