animation

[name duration timing-function delay iteration-count direction fill-mode play-state]

Permet de créer des animations avec keyframe!

animation-timing-function :
[linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n)]

animation-play-state :
[paused | running]
À utiliser avec javascript pour mettre une animation sur pause.

animation-iteration-count :
[number | infinite]
Indique le nombre de fois que dois jouer l'animation.

animation-delay :
[3.4s | 500]
Indique le délais avant de déclencher l'animation. À indiquer en secondes ou millisecondes.
VIP : le délais ne se répète pas!

Différentes façon de déclarer les keyframes :

@keyframes fromto { from { transform : scale(1.5, 0.9); } to { transform : scale(1, 1); } } .anim { animation : fromto 0.8s infinite; }
pour des animations simples
@keyframes fromto { 0% { transform : scale(1, 1) ; } 15% { transform : scale(0.75, 1.1) ; } 25% { transform : scale(0.82, 0.88) ; } 30% { transform : scale(0.69, 1.3) ; } 40% { transform : scale(1.5, 0.9) ; } 40% { transform : scale(0.9, 1.1) ; } 100% { transform : scale(1, 1) ; } } .anim { animation : fromto 0.8s infinite; }
pour des animations plus complexes

animation-fill-mode :
[none | forwards | backwards | both]
Indique quel style doit être appliqué à un élément animé AVANT et/ou APRÈS l'animation. Est-ce le style de l'élément? ou le style défini au début de l'animation? ou le style défini à la fin de l'animation?
Pour mieux comprendre, c'est possible que le style de l'élément, le style défini au début de l'animation et à la fin de l'animation soient tous différents! Donc animation-fill-mode permet de définir lequel de ces trois styles doit être appliqué.

.anim { animation : fromto 0.8s 1; animation-fill-mode : forwards ; animation-delay : 1s; }

débute avec le style défini de l'élément, reste au style final défini par l'animation lorsqu'elle est terminée.
.anim { animation : fromto 0.8s 1; animation-fill-mode : backwards ; animation-delay : 1s; }
commence avec le style défini dans l'animation de départ,
revient au style défini par l'élément hors animation lorsqu'elle est terminée.
.anim { animation : fromto 0.8s 1; animation-fill-mode : both ; animation-delay : 1s; }
commence avec le style défini dans l'animation,
termine avec le style défini dans l'animation lorsqu'elle est terminée.
.anim { animation : fromto 0.8s 1; animation-fill-mode : auto ; animation-delay : 1s; }
commence et termine l'animation avec le style défini par l'élément hors animation.

animation-direction :
[normal | reverse | alternate | alternate-reverse]
Permet de jouer l'animation dans les deux sens, ou à l'envers.

.anim { animation : fromto 0.8s infinite; animation-direction : normal ; }
.anim { animation : fromto 0.8s infinite; animation-direction : reverse ; }
.anim { animation : fromto 0.8s infinite; animation-direction : alternate ; }
.anim { animation : fromto 0.8s infinite; animation-direction : alternate-reverse ; }