HTML DOM 样式动画属性

htmlweb developmentfront end technology更新于 2024/5/20 19:56:17

CSS 允许我们为元素属性的过渡添加动画效果。我们使用 animation 属性来定义所需的样式。我们可以使用 animation 关键字组合 animation-name、animation-duration、animation-iteration-count 等属性。

语法

动画属性的语法如下 −

object.style.animation = "name 持续时间 timingFunction 延迟 iterationCount 方向 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>