@keyframes
Les keyframes indiquent les étapes constituant une animation.
Dans son expression la plus simple, il est possible de spécifier un état de départ from
(0%) et un état de fin to
(100%) .
@keyframes anim {
from { transform: translateX(0%) }
to { transform: translateX(400%) }
}
Une interpolation sera effectuée entre ces deux états.
Pour une animation plus élaborée, il est possible de spécifier plusieurs états avec des pourcentages.
@keyframes anim {
0%, 100% { transform: translate(0%, 0%) }
25% { transform: translate(400%, 0%) }
50% { transform: translate(400%, 200%) }
75% { transform: translate(0%, 200%) }
}
À gauche, @keyframes utilisant un from
et un to
.
À droite, @keyframes utilisant des pourcentages.
- @kf
- @keyframes
- @keyframes
animation-name
Permet d'attribuer une animation à partir de son nom de référence en indiquant quel @keyframes appliquer à quel élément.
Par exemple, pour que l'élément avec la classe .element
ait l'animation intitulée anim
, il est possible de faire:
.element {
animation-name: anim;
}
- animn
- animation-name
- animation-name
animation-duration
Définis la durée d'une animation. Ce nombre peut-être en seconde ou en milliseconde.1s
= 1000ms
.
Par exemple, nous avons trois fois la même animation animation-name: left-to-right
, mais à des durées différentes:
1 seconde
2 secondes
3 secondes
- animdur
- animation-duration
- animation-duration
animation-timing-function
Dicte à l'animation son rythme. Par exemple, dans l'animation précédente on remarque que chaque carré accélère progressivement avant de ralentir ensuite. Ce rythme est appelé ease
et est celui par défaut des animations.
L'exemple suivant contient six fois la même animation, mais avec des rythmes différents
linear
vitesse constante, n'accélère ou ne ralentis jamais ↗️ease
accélère progressivement et ralentis en fin de parcours (Comportement par défaut)ease-in-out
commence lentement et ralentis en fin de parcours.ease-in
commence lentement ⤴️ease-out
ralentis en fin de parcours ⤵️cubic-bezier
Rythme personnalisable via une courbe de Bézier.
animation-iteration-count
Indique le nombre de fois qu'une animation doit être jouée (par défaut 1). Ce nombre peut-être compris entre 0 et ∞ et accepte les fractions. Il est aussi possible de spécifier infinite
pour qu'elle joue à l'infini.
Par exemple:
Joue 1x
Joue 2x
Joue à l'infinie ♾️
animation-delay
Définis le délai d'attente avant de démarrer une animation. Par défaut, cette propriété est à 0s
. Si une valeur négative est attribuée, l'animation débutera déjà commencé, comme-ci l'équivalent de la valeur s'était déjà écoulée.
Par exemple:
Aucun délai
Délais de 0.5s
Délais d'une seconde
- animdel
- animation-delay
- animation-delay
animation-direction
Indique la direction dans laquelle une animation doit-être joué.
Valeurs possibles:
normal
du début vers la fin (par défaut)reverse
de la fin vers le débutalternate
alterne entre normal et reverse à chaque itération de l'animation.alternate-reverse
alterne entre reverse et normal à chaque itération de l'animation.
Par exemple:
Normal
Renversé
Alterné
animation-fill-mode
Indique l'apparence que doit prendre l'élément lorsque l'animation est terminée.
Valeurs possibles:
none
redevient tel qu'avant l'animation (par défaut)forwards
garde l'apparence donnée par l'animation à la finbackwards
garde l'apparence donnée par l'animation au débutboth
combine l'apparence donnée par l'animation au début et à la fin
Par exemple:
None
Forwards
animation-play-state
Indique si une animation doit jouer ou être en pause.
Valeurs possibles et exemple:
running
l'animation jouepaused
l'animation est en pause