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

animationTimingFunction 用於指定動畫在其循環中的進展方式。它通過設置或返回動畫的速度曲線來實現。速度曲線通過指定動畫從一種狀態移動到另一種狀態所需的時間來定義過渡的平滑程度。

用法

以下是語法 -

設置 animationTimingFunction 屬性 -

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

值

以下是值 -

Sr.No	值和描述
1	linear 這指定動畫在整個動畫過程中具有相同的速度。
2	ease 這是指定動畫開始和結束較慢但中間較快的默認值。
3	ease-in 動畫開始緩慢。
4	ease-out 動畫有一個緩慢的結尾。
5	ease-in-out 動畫開始時很慢，結束時也很慢。
6	cubic-bezier(n, n, n,n) 為您的自定義值定義 cubic-bezier 函數。
7	initial 用於將此屬性設置為初始值。
8	inherit 繼承父屬性值。

示例

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

<!DOCTYPE html>
<html>
<head>
<style>
   #PARA1{
      border:2px solid black;
      position:relative;
      animation:demo 5s infinite;
      animation-timing-function:linear;
   }
   @keyframes demo {
      from {background-color:lightcoral; color:black;}
      to {background-color:indigo; color:white;}
   }
</style>
<script>
   function timingChange(){
      document.getElementById("PARA1").style.animationTimingFunction="ease";
      document.getElementById("Sample").innerHTML="The animation timing is now set to ease.";
   }
</script>
</head>
<body>
<p id="PARA1">
Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices.
Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras
pulvinar mattis nunc sed blandit libero.</p>
<p>Click the below button to change the above animation name</p>
<button onclick="timingChange()">CHANGE TIMING</button>
<p id="Sample"></p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊更改時間按鈕 -

相關用法

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