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 :

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é

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

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

Catégoriescss