Home > Article > Web Front-end > Use CSS to set animation playback times

Use CSS to set animation playback times

WBOYforward: 2023-09-10 08:53:07981browse

使用 CSS 设置动画播放次数

Use the animation-iteration-count property to set the number of times the animation should play via CSS

Example

Live demonstration

<!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>

The above is the detailed content of Use CSS to set animation playback times. For more information, please follow other related articles on the PHP Chinese website!

css count animation

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to create a printable web page using CSS media queries?Next article：How to create a printable web page using CSS media queries?

See more

Use CSS to set animation playback times

Example

Related articles