Définition et utilisation de la propriété css animation
La propriété animation est un raccourci des propriétés :- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
Voir aussi notre tutoriel Animations CSS3
La Syntaxe CSS
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Note : Toujours spécifier la propriété animation-duration, sinon la durée est de 0, et ne sera jamais jouée.
| Valeurs par défaut | Stretch |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.animation="monMove 5s infinite" |
Prise en charge de la propriété css animation dans 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 -webkit- | 9 4 -webkit- | 30 15 -webkit- 12 -o- |
Exemple : Création d'une animation pour un élément div, en utilisant la propriété raccourcie animation
Déplacez un élément de 0px à 300px à gauche. L'animation dure 5 secondes. Elle recommence ensuite, et se poursuit indéfiniment (infini).
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: monAnimation 5s infinite;
}
@keyframes monAnimation {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<h1>La propriété css animation </h1>
<div></div>
</body>
</html>
changer l'animation avec JavaScript
Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
#monDiv {
width: 100px;
height: 100px;
background: blue;
position: relative;
animation: mymove 1s infinite;
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes monAnimation {
from {top: 0px;}
to {top: 200px;}
}
#b1{display:inline;}
#b2{display:none;}
</style>
</head>
<body>
<h1>Modification de l'animation avec JavaScript</h1>
<p>
Cliquez sur le bouton "Essayer" ci dessous pour modifier la valeur de la propriété "animation".</p>
<button id="b1" onclick="maFonction()">Essayer</button><button id="b2" onclick="maFonction2()">Retour</button>
<script>
function maFonction() {
document.getElementById("monDiv").style.animation = "monAnimation 4s 2";
document.getElementsByTagName("p")[0].innerHTML = "<b>Cliquez sur le bouton 'Retour' pour revenir à l'animation initiale'</b>";
document.getElementById("b1").style.display = "none";
document.getElementById("b2").style.display = "inline";
}
function maFonction2() {
location.href="teste.html" ;
}
</script>
<div id="monDiv"></div>
</body>
</html>
Valeurs de la propriété animation
| Valeur | Description |
|---|---|
| animation-delay | Spécifie un délai avant le démarrage de l'animation |
| animation-direction | Indique si l'animation doit être jouée en sens inverse sur des cycles alternés. |
| animation-duration | Indique le nombre de secondes ou de millisecondes nécessaires à la réalisation d'une animation. |
| animation-fill-mode | Spécifie quelles valeurs sont appliquées par l'animation en dehors de son temps d'exécution |
| animation-iteration-count | Spécifie le nombre de fois qu'une animation doit être jouée. |
| animation-name | Spécifie le nom de l'image clé que vous souhaitez lier au sélecteur. |
| animation-play-state | Indique si l'animation est en cours d'exécution ou en pause. |
| animation-timing-function | Spécifie la courbe de vitesse de l'animation |
| initial | Définit cette propriété à sa valeur par défaut. |
| inherit | Hérite de cette propriété de son élément parent. |