New guide CSS - animation

animation

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

Permet de créer des animations avec keyframe!

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 ;
}