Propriété animation

La propriété animation est une propriété raccourcie pour l'animation, permettant de définir toutes les propriétés pour l'animation simultanément : animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

L'ordre des valeurs n'a pas d'importance, la durée d'exécution de l'animation animation-duration doit obligatoirement être placée avant le délai animation-delay. Seules les propriétés animation-name et animation-duration sont obligatoires.

La propriété peut également prendre la valeur none, qui désactive complètement l'animation. Cette valeur est la valeur par défaut.

Syntaxe

csssélecteur {
  animation: valeurs;
}

Exemple

Dans cet exemple, il y aura un délai de 3 secondes avant l'animation (avant chaque nouvelle lecture), puis l'animation sera lue pendant 6 secondes :

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Exemple . Problèmes possibles

Une animation écrite sous forme raccourcie peut ne pas fonctionner à cause de son nom. Examinons l'animation suivante :

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

Remarquez, j'utilise le nom d'animation reverse. À première vue, tout va bien, mais l'animation ne fonctionne pas, car reverse est un mot-clé valide pour la propriété animation-direction.

L'animation ne fonctionnera pas non plus si l'on utilise d'autres mots-clés comme nom dans la forme raccourcie. Mais tout fonctionne bien en utilisant la forme "complète" de description.

Parmi les mots-clés-valeurs de animation-direction qui cassent les animations, on trouve également les mots-clés liés aux fonctions de temporisation, ainsi que infinite, alternate, running, paused et ainsi de suite.

Voir aussi