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

CSS 允許我們為元素屬性的過渡設置動畫。我們使用 animation 屬性來定義我們想要的樣式。我們可以使用動畫關鍵字組合 animation-name、animation-duration、animation-iteration-count 等屬性。

用法

動畫屬性的語法如下 -

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

值

以下是值 -

值	描述
animation-name	用於指定要綁定選擇器的關鍵幀名稱。
animation-duration	指定完成動畫的持續時間(以秒或毫秒為單位)。
animation-timing-function	指定動畫速度曲線。
animation-delay	在動畫開始之前指定一些延遲
animation-iteration-count	指定應該播放動畫的時間
animation-direction	指示動畫是否應該或不應該以交替或反向循環播放。
*animation-fill-mode*	指定動畫在執行時間之外應用的值
*animation-play-state*	指定動畫當前是暫停還是播放。
initial	用於將此屬性設置為初始值。
inherit	繼承父屬性值。

示例

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

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      width:5px;
      height:15px;
      background-color:limegreen;
      animation:demo 4s infinite;
   }
   @keyframes demo {
      from {width:5px; background-color:limegreen;}
      to {width:400px; background-color:darkgreen;}
   }
   @keyframes demo1 {
      from {height:5px; background-color:limegreen;}
      to {height:400px; background-color:darkgreen;}
   }
</style>
<script>
   function changeAnimation() {
      document.getElementById("DIV1").style.animation = "demo1 4s 2";
   }
</script>
</head>
<body>
<button onclick="changeAnimation()">CHANGE ANIMATION</button>
<p>Change the below animation by clicking the above button</p>
<div id="DIV1"></div>
</body>
</html>

輸出

這將產生以下輸出 -

單擊“更改動畫”按鈕後，動畫將更改 -

相關用法

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