📌  相关文章
📜  HTML | DOM 样式 animationName 属性(1)

📅  最后修改于: 2023-12-03 15:31:13.407000             🧑  作者: Mango

HTML | DOM 样式 animationName 属性

简介

animationName 属性用于设置 CSS 动画的名称，同时该名称需要与 @keyframes 规则中的名称匹配。

语法
<element style="animation-name: name;">
属性值
  • name：动画名称，必须与 @keyframes 规则中的名称匹配。
示例
<!DOCTYPE html>
<html>
  <head>
    <style>
      @keyframes example {
        from {background-color: red;}
        to {background-color: yellow;}
      }
      #myDiv {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: infinite;
      }
    </style>
  </head>
  <body>
    <div id="myDiv"></div>
  </body>
</html>
解释

该示例中， example 是动画名称，通过 animation-name 属性将其设置为 myDiv 元素的动画名称。animation-duration 属性用于设置动画的时长为 4 秒，animation-iteration-count 属性用于设置动画重复次数为无限次。

参考