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.

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

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web