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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。