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