Les animations CSS - FAQ CSS

Comment faire des animations en Css?

Vous pouvez en feuille de style css faire des animations sur des propriétés Css. Pour cela vous devez utiliser la feuille de style css @keyframes{} qui permet de décrire les images clés d'une animation Css.
Vous devrez aussi spécifier en autre :

la liaison entre les propriétés d'animation et les images clés grâce à la propriété Css animation-name.
la durée de l'animation avec la propriété Css animation-duration.
une pause avant le démarrage de l'animation avec la propriété Css animation-delay.
le "type d'animation" de l'animation avec la propriété Css animation-timing-function.

Vous trouverez un article complet sur la manière de créer une animation en CSS3.

Définitions annexes

Définitions CSS annexes

@keyframes{}: La règle d'Animation CSS @KEYFRAMES{} permet spécifier les images clés d'une animation CSS. Exemple d'écriture CSS de @keyframes @keyframes identifiant{...[ @keyframes{} ]
animation-delay: La propriété d'Animation CSS ANIMATION-DELAY permet de spécifier la durée de latence (pause) avant de démarrer une animation CSS.Exemple d'écriture CS...[ animation-delay ]
animation-direction: La propriété d'Animation CSS ANIMATION-DIRECTION permet de spécifier le sens de lecture de l'animation à appliquer, notamment pour les répétitions.Exe...[ animation-direction ]
animation-duration: La propriété d'Animation CSS ANIMATION-DURATION permet de spécifier la durée totale de l'animation à appliquer.Exemple d'écriture CSS de animation-dur...[ animation-duration ]
animation-fill-mode: La propriété d'Animation CSS ANIMATION-FILL-MODE permet de spécifier à quel moment de l'animation CSS les effets sont apparents (avant, après).Exemple...[ animation-fill-mode ]
animation-iteration-count: La propriété d'Animation CSS ANIMATION-ITERATION-COUNT permet de spécifier le nombre de fois qu'est joué l'animation CSS .Exemple d'écriture CSS de an...[ animation-iteration-count ]
animation-name: La propriété d'Animation CSS ANIMATION-NAME permet de spécifier l'identifiant de l'animation CSS.Exemple d'écriture CSS de animation-name @keyframes a...[ animation-name ]
animation-play-state: La propriété d'Animation CSS ANIMATION-PLAY-STATE permet de spécifier si l'animation CSS appliquée est en pause ou si l'animation est jouée.Exemple d'...[ animation-play-state ]
animation-timing-function: La propriété d'Animation CSS ANIMATION-TIMING-FUNCTION permet de spécifier comment progresse l'animation CSS entre les images clés.Exemple d'écriture ...[ animation-timing-function ]

Les animations CSS - FAQ CSS

Comment faire des animations en Css?

Faire des animations grâce aux feuilles de style Css