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