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