En CSS3, l'attribut animation-play-state peut être utilisé pour arrêter l'animation en cours. La fonction de cet attribut est de spécifier si l'animation est en cours d'exécution ou en pause. Il vous suffit d'ajouter "animation-play-state:paused". " à l'élément auquel l'animation est appliquée. ;" le style suffit.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS3, l'attribut animation-play-state peut être utilisé pour arrêter l'animation en cours d'exécution.
Par exemple : Il existe une telle animation rotative :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
animation: mymove 1s linear infinite;
}
@keyframes mymove {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove {/* Safari and Chrome */
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Si vous souhaitez empêcher l'élément div de tourner, vous pouvez définir l'attribut animation-play-state de l'élément div sur
div {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
animation: mymove 1s linear infinite;
animation-play-state:paused;
}
Instructions :
animation- L'attribut play-state précise si l'animation est en cours d'exécution ou en pause.
Syntaxe :
animation-play-state: paused|running;
paused : Spécifie que l'animation a été mise en pause.
running : Spécifie que l'animation est en cours de lecture.
Cet attribut peut être utilisé avec JavaScript pour mettre l'animation en pause pendant la lecture.
(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
