Home >Web Front-end >CSS Tutorial >Use CSS to set animation playback times
Use CSS to set animation playback times
- WBOYforward
- 2023-09-10 08:53:071049browse
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!
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?