Propriété css animation-play-state

Définition et utilisation da la propriété css animation-play-state

La propriété animation-play-state est utilisée pour préciser si l'animation est en cours d'exécution ou en pause.

Remarque : utilisez cette propriété dans un JavaScript pour mettre en pause une animation au milieu d'un cycle.

La Syntaxe CSS

animation-play-state: paused|running|initial|inherit;

Valeurs par défaut	Running
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.animationPlayState="paused"

Prise en charge de la propriété css animation-play-state dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.

Explorateur
	Verssion	43 4 -webkit-	10	16 5 -moz-	9 4 -webkit-	30 15 -webkit- 12 -o-

Exemple Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
            CSS propriété animation-play-state 
        </title>
        <style>
            body {
                text-align:center;
                width:80%;
            }
            h1 {
                color:green;
            }
            .oujood1 {
                width: 50px;
                height: 50px;
                background: green;
				border-radius:50%;
                position: relative;
                -webkit-animation: mymove 10s;
                -webkit-animation-play-state: play;
                animation: mymove 5s;
                animation-play-state: play;
            }
            .oujood2 {
                width: 50px;
                height: 50px;
                background: red;
				border-radius:50%;
                position: relative;
                -webkit-animation: mymove 10s;
                -webkit-animation-play-state: paused;
                animation: mymove 5s;
                animation-play-state: paused;
            }
            @-webkit-keyframes mymove {
                from {
                    left: 0%;
                }
                to {
                    left: 80%;
                }
            }
                 
            @keyframes mymove {
                from {
                    left: 0%;
                }
                to {
                    left: 80%;
                }
            }
        </style>
    </head>
    <body>
        <h1>oujood.com</h1>
        <h2>propriété css animation-play-state </h2>
        <div class = "oujood1"></div><br>
		<p>L'élément rouge est en pause</p><br>
        <div class = "oujood2" ></div>
    </body>
</html>

Changer la propriété css animation-play-stat avec JavaScript

Modifier le code ci dessus comme suit en utilisant la syntaxe javascript et l'événement onclick:

Exemple Copier le code

		<div class = "oujood2" onclick='this.style.animationPlayState="running"'></div>
		<p>Cliquer sur l'élément rouge avant la fin de l'animation, pour lancer son animation</p>

Valeurs de la propriété animation-play-state

paused : Cette propriété est utilisée pour mettre l'animation en pause.
running : Valeur par défaut. Cette propriété est utilisée pour spécifier que l'animation est en cours d'éxecution
initial : On utilise cette propriété pour définir sa valeur par défaut.
inherit : Cette propriété est utilisée pour hériter de la propriété d'animation de son parent.

Liste des propriétés css

Les propriétés CSS par ordre alphabétique

Définition et utilisation da la propriété css animation-play-state

Prise en charge de la propriété css animation-play-state dans les navigateurs

Changer la propriété css animation-play-stat avec JavaScript

Valeurs de la propriété animation-play-state

La méthode secrète likes sans fin sur Facebook