Attribut ANIMATION
Rôle
L’attribut animation permet de changer dans le temps un ou plusieurs attributs CSS d’un élément HTML. Vous pouvez découper l’animation en deux étapes (from to) ou en plusieurs étapes (entre 0 et 100%) grâce à la commande CSS @keyframes.
Cet attribut est le raccourci de six autres attributs :
- animation-name qui spécifie le nom de la commande @keyframes
- animation-duration qui spécifie la durée de l’animation
- animation-timing-function qui spécifie la courbe de vitesse de l’animation
- animation-delay qui spécifie le délai à attendre avant l’animation
- animation-iteration-count qui spécifie le nombre de répétition
- animation-direction qui spécifie si l’animation doit être inversée et/ou alternée
Syntaxe de l’animation
animation: mvt 3s infinite linear alternate ;
Ici ‘mvt’ est le nom de la commande @keyframes qui spécifie les étapes de l’animation
Syntaxe de la commande @keyframes
@keyframes mvt {
0% {transform: rotate(-45deg)}
100% {transform: rotate(45deg)}
}
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.animation
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
body{
padding: 30px;
background-color: rgb(230,230,230);
}
img{
border-radius: 50%;
width: 200px;
position: relative;
display: block;
margin: 0 auto;
border: thin solid orange;
animation: cos 3s infinite linear alternate ;
}
@keyframes cos {
0% {transform: rotate(-45deg); left: -50px}
100% {transform: rotate(45deg); left: 50px}
}
– Le code HTML
<img src="//lorempixel.com/output/people-q-c-200-200-6.jpg" alt="">
Résultat
Dans cet exemple l’animation concerne un mouvement de rotation (de -45° à 45°) et un réajustement de position (-50px à 50px) qui dure 3 secondes. Cette animation sera alternée infiniment.
Compatibilité
L’attribut animation est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 10
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)
Valeurs
Les différentes valeurs de l’attribut animation sont:
- animation-name
Le nom de la commande @keyframes
- Voir animation-name
- animation-duration
La durée de l’animation
- Voir animation-duration
- animation-timing-function
La courbe de vitesse de l’animation
- Voir animation-timing-function
- animation-iteration-count
Le nombre de répétition de l’animation
- Voir animation-iteration-count
- animation-delay
L’attente avant le début de l’animation
- Voir animation-delay
- animation-direction
Indique si l’animation doit être renversée et/ou jouée en alternance
- Voir animation-direction
- initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
animation : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
animation : inherit
A voir aussi
animation-direction– animation-delay– animation-duration– animation-timing-function
