Pour obtenir des animations plus complexes qu’avec une simple transition, on peut utiliser la propriété animation - par exemple pour répéter une transformation plusieurs fois.
Définit l’animation à utiliser [CSS3]
Cette animation doit avoir été crée au préalable avec @keyframes
animation-name: <string>
Définit la durée de l’animation [CSS3]
animation-duration: <time>
Définit le comportement de l’animation [CSS3]
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
step-start | step-end | steps(<n>[,start|end]) |
cubic-bezier(<x1>,<y1>,<x2>,<y2>)
Même format que transition-timing-function
Définit un délai entre le déclenchement et l’animation [CSS3]
0 par défaut
animation-delay: <time>
Définit le nombre de fois où l’animation est répétée [CSS3]
1 par défaut
animation-iteration-count: <number> | infinite
Définit dans quel sens appliquer l’animation [CSS3]
(de from à to / de to à from ,l’un après autre)
animation-direction: normal | reverse | alternatve | alternate-reverse
Pour utiliser la direction alternate, il faut un animation-iteration-count au moins égal à 2
(1 pour l’aller, 1 pour le retour).
JSFiddle animation direction
Définit la façon ont l’animation doit s’appliquer [CSS3]
animation-fill-mode: none | backwards | forwards | both
| Valeur | Description |
|---|---|
| backwards | Applique la première frame de l’animation avant qu’elle ne démarre |
| forwards | Applique la dernière frame après que l’animation soit finit |
| both | Applique backwards + forwards |
Permet de mettre l’animation en pause [CSS3]
animation-play-state: running | paused
Raccourci pour les propriétés ci-dessus [CSS3]
Définition:
animation: <name> <duration>
[<timing-function>] [<delay>]
[<iteration-count>] [<direction>]
[<fill-mode>] [<play-state>]
Exemple:
.anim {
animation: slide 2s;
}
@keyframes slide {
to { transform: translateX(900px); }
}
Multiples animations :
Plusieurs animations peuvent s’appliquer à un élément, en les séparant par des virgules
{
animation: slideIn 0.8s linear,
fadeIn 0.2s ease-in;
}
Est équivalent à
{
animation-name: slideIn, fadeIn;
animation-duration: 0.8s, 0.2s;
animation-timing-function: linear, ease-in;
}
La propriété will-change permet d’indiquer au navigateur que l’élément va changer pour que le navigateur mette en place des optimisations avant que l’élément ne change vraiment. Cela permet d’augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement.
will-change est conçu pour être utilisé en dernier ressort afin de régler les problèmes de performances existants. En utilisant will-change trop souvent, cela consommera plus de mémoire, complexifiera le rendu de la page pour le navigateur (qui se préparera au changement). En bref, cela réduira les performances de la page.
Définition:
will-change: <property>
Exemple:
{
will-change: opacity;
}