Mon élément
.plant.Ici, la propriété
translate nous permet de déplacer l'élément X (vertical) de 0% à 90%.Ici, la propriété
translate nous permet de déplacer l'élément X (vertical) de 0% à 90%.La déclaration
@keyframes déclare une animation.Ici, la classe de mon élément, ce qui le définit
la propriété
animation qui me permet de dire à mon CSS qu'on va animer tout çaLà, le nom de ma variable (je dis au CSS que c'est cette animation là que je veux)
C'est la durée de notre animation, au total, donc le temps qu'il lui faut pour passer de
0% à 100%.C'est la fonction temporelle de l'animation.
Il en existe plusieurs :
Il en existe plusieurs :
linear : même vitesse, du début à la finease-in : départ lentease-out : fin lenteease-in-out : départ lent et fin lentesteps(nombre) : déconstruction par étapesC'est le délai avant lequel l'animation commence
C'est le nombre d'itérations. Ici,
infinite annonce que l'on joue l'aniamtion en boucle. À la place, je peux écrire un nombre de mon choix, et l'animation sera jouée ce même nombre de fois.C'est la direction de l'animation, donc le sens dans lequel elle va lire la fonction temporelle.
Là aussi, il en existe plusieurs :
Là aussi, il en existe plusieurs :
normal : de gauche à droitereverse: à l'enversalternate: de gauche à droite puis de droite à gaucheLa propriété
transform me permet de transformer mon élément, soit en effectuant une rotation, une échelle ou un déplacement.The
roll animation moves the element horizontally from 0% to 90%.