HTML DOM Style animationDirection屬性用法及代碼示例

animationDirection 屬性用於指定動畫的方向，可以是向前、向後或交替。

用法

以下是語法 -

設置 animationDirection 屬性 -

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

值

以下是值 -

值	描述
Normal	這是默認值，表示動畫應該正常播放。
Reverse	用於指示動畫應該反向播放。
Alternate	用於使動畫在奇數時間正常播放，在偶數時間反向播放。
alternate-reverse	這是交替的反轉，每隔奇數次以相反方向播放 e 動畫，每偶數次以正常方向播放 e 動畫。
Initial	將此屬性設置為初始值
nherit	從其父元素繼承此屬性。

示例

讓我們看一下 animationDirection 屬性的示例 -

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      width:50px;
      height:80px;
      background:skyblue;
      position:relative;
      animation:high 5s infinite;
      z-index:-1;
      animation-direction:normal;
   }
   @keyframes high {
      0% {left:0px; top:0px;}
      25% {background-color:lightblue; left:0px; top:0px;}
      50% {background-color:lightgreen; left:550px; top:80px;}
      75% {background-color:lightblue; left:0px; top:80px;}
      100% {left:0px; top:0px;}
   }
</style>
<script>
   function changeDir(){
      document.getElementById("DIV1").style.animationDirection="alternate-reverse"
   }
</script>
</head>
<body>
<h1>animationDirection property example</h1>
<div id="DIV1"></div>
<p>Change the animation direction of the div by clicking the below button</p>
<button onclick="changeDir()">CHANGE DIRECTION</button>
</body>
</html>

輸出

這將產生以下輸出 -

隨著動畫的進展，它將向右對角移動 -

單擊更改方向後，它將首先從起點向下移動，然後反向移動 -

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Style animationDirection Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。