animation - CSS en Javascript

Définition du JS animation.

La propriétés Javascript animation CSS est un raccourci en Javascript pour déclarer un ensemble de propriétés d'animation en une seule fois

oDomElement.style.animation = "exemplew0 5s ease-out 2s infinite normal none";
oDomElement.style.animation = "none";

La propriété Javascript animation CSS peut prendre toutes les valeurs de la propriété CSS animation.

La propriété CSS animation renvoie une valeur de type String :

• 0s ease 0s normal none 1 running none*, par défaut pour la valeur calculée et vide pour la valeur locale.
• ou les valeurs calculées* des divers propriétés d'animation pour la valeur calculée et la valeur spécifiée pour la valeur locale.

*) L'ordre est le suivant :

• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• animation-name

Découvrez la page dédiée pour comprendre le principe de base d'une animation en CSS3.

Exemple de code animation JS

Conditions d'application de la CSS animation.

La propriété Javascript animation s'applique dans les mêmes conditions que la propriété CSS animation.

Problème d'interprétation de animation en JS.

La valeur calculée de animation semble n'être jamais remplie, il faut passer par les propriétés Javascript animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction.

Pour les problÚmes plus généraux non liés au Javascript, consultez la définition CSS de la propriété animation.

Compatibilités navigateurs

Votre avis sur la définition animation en JS