Home > Article > Web Front-end > What attributes are used for css3 animation that only loops once?
What attributes are used for css3 animation that only loops once?
- 青灯夜游Original
- 2022-03-18 15:46:012498browse
css3 animation only loops once and is set with the "animation-iteration-count" attribute. This attribute can specify the number of executions of the animation. When the value of this attribute is 1, the animation can be set to loop only once; the syntax "element {animation-iteration-count:1;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css3 animation only loops once and is set with the animation-iteration-count property.
The animation-iteration-count attribute can specify the number of executions of the animation and define how many times the animation should be played.
When the value of this attribute is 1, the animation can be set to loop only once.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: 1;
/* Safari and Chrome */
-webkit-animation: mymove 3s;
-webkit-animation-iteration-count: 1;
}
@keyframes mymove {
0% {
top: 0px;
}
50% {
top: 200px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
0% {
top: 0px;
}
50% {
top: 200px;
}
100% {
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Learning video sharing: css video tutorial, web front-end)
The above is the detailed content of What attributes are used for css3 animation that only loops once?. For more information, please follow other related articles on the PHP Chinese website!