Section courante

A propos

Section administrative du site

animation

 Animation
CSS3  

Syntaxe

animation: name duration timing-function delay iteration-count direction fill-mode play-state |inherit|initial;

Paramètres

Paramètre Description
name Ce paramètre permet d'indiquer le nom de l'animation «@keyframes» :
Valeur Description
keyframename Cet attribut permet d'indiquer le nom du keyframe en liaison avec le sélecteur.
inherit Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.
none Cet attribut permet d'indiquer qu'il n'y a pas d'animation. C'est la valeur par défaut.
duration Ce paramètre permet d'indiquer la durée en secondes ou millisecondes de l'animation :
Valeur Description
temps Cet attribut permet d'indiquer le nombre de secondes ou de millisecondes que doit durée l'animation. La valeur par défaut est 0.
inherit Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.
timing-function Ce paramètre permet d'indiquer la vitesse de la courbe d'animation :
Valeur Description
cubic-bezier(n,n,n,n) Cet attribut permet de définir manuellement la fonction cubique-Bézier. Les valeurs possibles sont des valeurs entre 0 et 1.
ease Cet attribut permet d'indiquer que l'animation démarre lentement, accélère, et ralentis à la fin. C'est la valeur par défaut.
ease-in Cet attribut permet d'indiquer que l'animation est lent au début.
ease-in-out Cet attribut permet d'indiquer que l'animation est lente au début et à la fin.
ease-out Cet attribut permet d'indiquer que l'animation est lent à la fin.
inherit Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.
linear Cet attribut permet d'indiquer que l'animation a la même vitesse au début et à la fin.
delay Ce paramètre permet d'indiquer le délai avant le démarrage de l'animation :
Valeur Description
temps Cet attribut permet d'indiquer le nombre de secondes ou de millisecondes à attendre avant que l'animation commence. La valeur par défaut est 0.
inherit Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.
iteration-count Ce paramètre permet d'indiquer le nombre de fois que l'animation doit se produire :
Valeur Description
number Cet attribut permet d'indiquer le nombre définissant combien de fois une animation doit être joué. La valeur par défaut est 1.
infinite Cet attribut permet d'indiquer l'animation doit être jouer un nombre infini de fois.
inherit Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.
direction Ce paramètre permet d'indiquer la direction et le cycle de l'animation :
Valeur Description
alternate Cet attribut permet d'indiquer qu'il doit être en alternance en direction normal lorsque son mouvement en impaire (1, 3, 5, 7, 9,...) et en direction inversé lorsqu'elle est paire (2, 4, 6, 8, 10,...).
alternate-reverse Cet attribut permet d'indiquer qu'il doit être en alternance en direction normal lorsque son mouvement en paire (2, 4, 6, 8, 10,...) et en direction inversé lorsqu'elle est impaire (1, 3, 5, 7, 9,...).
inherit Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.
normal Cet attribut permet d'indiquer que l'animation doit être joué de façon normal. C'est la valeur par défaut.
reverse Cet attribut permet d'indiquer que l'animation doit être joué en direction inversé.
fill-mode Ce paramètre permet d'indiquer l'apparence de l'élément lorsque l'animation ne fonctionne pas :
Valeur Description
backwards Cet attribut permet d'indiquer qu'il faut appliquer les valeurs de propriétés définit de le keyframe débutant à la première itération d'une animation durant la période définit par une propriété «animation-delay».
both Cet attribut permet d'indiquer que l'animation doit suivre les règles pour l'avant et l'arrière.
forwards Cet attribut permet d'indiquer qu'il faut appliquer les valeurs de propriétés à chaque fois que l'animation se termine.
none Cet attribut permet d'indiquer que l'animation n'applique pas de style à l'élément de destination avant ou après son exécution. C'est la valeur par défaut.
inherit Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.
play-state Ce paramètre permet d'indiquer si l'animation se produit ou est en pause :
Valeur Description
inherit Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.
paused Cet attribut permet d'indiquer l'animation est en état de pause.
running Cet attribut permet d'indiquer l'animation est en état d'exécution. C'est la valeur par défaut.
inherit Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent.
initial Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété.

Description

Cette propriété permet d'indiquer toutes les propriétés d'animation.



Dernière mise à jour : Vendredi, le 1er janvier 2016