Home >Web Front-end >CSS Tutorial >How to set and execute css3 animation once
How to set and execute css3 animation once
- 青灯夜游Original
- 2022-01-13 12:50:3510018browse
In CSS3, you can use the animation-iteration-count attribute to set the animation to be executed once. The function of this attribute is to define the number of times the animation is played; when the value of the animation-iteration-count attribute is set to the number "1" , you can set the animation to play only once.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS3, you can use the animation-iteration-count attribute to set the animation to execute once.
The animation-iteration-count attribute can define the number of times the animation is played and set how many times the animation should be played.
Syntax:
animation-iteration-count: value;
| Value | Description |
|---|---|
| n | A number that defines how many times the animation should be played |
| infinite | Specifies that the animation should be played an infinite number of times (forever) |
Example:
Set the animation to play only once
<!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 {
from {
top: 0px;
}
to {
top: 200px;
}
}
@-webkit-keyframes mymove
/* Safari and Chrome */
{
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Modify it and set the animation to play 3 times
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: 3;
/* Safari and Chrome */
-webkit-animation: mymove 3s;
-webkit-animation-iteration-count: 3;
}
（Learning video sharing: css video tutorial）
The above is the detailed content of How to set and execute css3 animation once. For more information, please follow other related articles on the PHP Chinese website!