Maison >interface Web >Questions et réponses frontales >Quels attributs sont utilisés pour l'animation CSS3 qui ne boucle qu'une seule fois ?
Quels attributs sont utilisés pour l'animation CSS3 qui ne boucle qu'une seule fois ?
- 青灯夜游original
- 2022-03-18 15:46:012548parcourir
L'animation CSS3 ne boucle qu'une seule fois et est définie avec l'attribut "animation-iteration-count". Cet attribut peut spécifier le nombre d'exécutions de l'animation. Lorsque la valeur de cet attribut est 1, l'animation peut être définie en boucle. une seule fois ; la syntaxe "element {animation-iteration" -count:1;}".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3. L'animation
css3 ne boucle qu'une seule fois et est définie avec l'attribut animation-iteration-count.
L'attribut animation-iteration-count peut spécifier le nombre d'exécutions de l'animation et définir combien de fois l'animation doit être jouée.
Lorsque la valeur de cet attribut est 1, l'animation ne peut être configurée qu'en boucle une seule fois.
Exemple :
<!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>
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!