Référence : https://developer.mozilla.org/fr/docs/Web/CSS/@keyframes
Animation
La règle @keyframes
permet de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec les transitions.
Chaque règle @keyframes
contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..
Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.
Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.
Seules les propriétés qui sont définies sur les étapes de début (0%
) et de fin (100%
) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.
!important dans une étape
Les déclarations qui utilisent !important
dans une description d'étape sont ignorées
Exemple :
p {
animation-duration: 25s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
Itérations :
animation-iteration-count permet de spécifier le nombre de fois où l'animation devra se jouer.
Référence : https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count