设置应使用CSS播放动画的次数

使用animation-iteration-count属性设置应使用CSS播放动画的次数

示例

<!DOCTYPE html>

<html>

   <head>

      <style>

         div {

            width: 150px;

            height: 200px;

            position: relative;

            background-color: yellow;

            animation-name: myanim;

            animation-duration: 2s;

            animation-direction: alternate-reverse;

            animation-iteration-count: 3;

         }

         @keyframes myanim {

            from {left: 100px;}

            to {left: 200px;}

         }

         #demo1 {animation-timing-function: ease;}

         #demo2 {animation-timing-function: ease-in;}

      </style>

   </head>

   <body>

      <div id = "demo1">ease effect</div>

      <div id = "demo2">ease-in effect</div>

   </body>

</html>

以上是 设置应使用CSS播放动画的次数 的全部内容, 来源链接: utcz.com/z/321982.html

回到顶部