@keyframes
La règle @keyframes permet aux auteurs 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.Afin d'utiliser ces règles, on créera une règle @keyframes avec un nom pour chaque étape et on utilisera ce nom avec la propriété animation-name afin qu'une animation corresponde à la liste des étapes qui la composent. 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.
Afin qu'une liste d'étapes soit valide, il faut a minima décrire des étapes pour l'avancement 0% (ou from) et 100% (ou to) (qui définissent respectivement le début et la fin de l'animation). Si aucune de ces étapes n'est définie, la déclaration est invalide et sera ignorée par l'analyseur.
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.
Si plusieurs règles @keyframes existent avec le même nom, c'est la dernière qui est utilisée. Les règles @keyframes ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.
Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.
Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation.
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.
<style>
.bloc {
width: 285px;
height: 100px;
margin-top: -100px;
overflow: hidden;
}
.C, .S1, .S2, .trois {
font-size: 100px;
font-weight: bold;
line-height: 100px;
float: left;
margin-top: -100px;
}
.C {
color: #ffff00;
animation: C 5s ease infinite alternate;
}
.S1 {
color: #ff00ff;
animation: S1 5s ease 500ms infinite alternate;
}
.S2 {
color: #00ffff;
animation: S2 5s ease 1000ms infinite alternate;
}
.trois {
color: #828282;
animation: trois 5s ease 1500ms infinite alternate;
margin-left: 20px;
}
@keyframes C {
from { margin-top: -100px; }
to { margin-top: 0px; }
}
@keyframes S1 {
from { margin-top: -100px; }
to { margin-top: 0px; }
}
@keyframes S2 {
from { margin-top: -100px; }
to { margin-top: 0px; }
}
@keyframes trois {
from { margin-top: -100px; }
to { margin-top: 0px; }
}
</style>
<div class="bloc">
<div class="C">C</div>
<div class="S1">S</div>
<div class="S2">S</div>
<div class="trois">3</div>
</div>
C
S
S
3