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:114453parcourir

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.

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

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