HTML DOM 样式 animationDirection 属性

htmlweb developmentfront end technology更新于 2024/5/20 18:52:17

animationDirection 属性用于指定动画的方向，可以是正向、反向或交替。

语法

以下是语法 −

设置 animationDirection 属性 −

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

值

以下是值 −

值	描述
Normal	这是默认值，表示动画应正常播放。
Reverse	用于指示动画应反向播放。
Alternate	使动画在奇数时间正常播放，在偶数时间反向播放。
alternate-reverse	这是alternate的反向，在每个奇数时间和偶数时间反向播放动画。每偶数次都按正常方向移动。
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>