Maison > Article > interface Web > Comment utiliser la propriété animation-play-state

Comment utiliser la propriété animation-play-state

青灯夜游original: 2019-02-01 11:12:114449parcourir

L'attribut animation-play-state est utilisé pour spécifier si l'animation est en cours d'exécution ou en pause ; il peut être utilisé avec JavaScript pour obtenir l'effet de pause de l'animation pendant la lecture.

Propriété CSS3 animation-play-state

Fonction : animation- L'attribut play-state spécifie 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.

Remarque : Vous pouvez utiliser cet attribut en JavaScript pour mettre l'animation en pause pendant la lecture.

Remarque : Internet Explorer 9 et versions antérieures ne prennent pas en charge l'attribut animation-play-state.

Exemple d'utilisation de l'attribut CSS3 animation-play-state

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:running;

/* Safari and Chrome */
-webkit-animation:mymove 5s;
-webkit-animation-play-state:running;
}
div:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Rendu :

Comment utiliser la propriété animation-play-state

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la propriété animation-directionArticle suivant：Comment utiliser la propriété animation-direction

Articles Liés

Voir plus