oujood.com

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

chercher |

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éfautRunning
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion43
4 -webkit-
1016
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.




Voir aussi nos tutoriel :

fonction strrchr, strrchr

Trouve la dernière occurrence d'un caractère dans une chaîne

fonction str_shuffle, str_shuffle

M lange les caractères d'une chaîne de caractères

Balise details

Définit les détails supplémentaires que l'utilisateur peut afficher ou cacher