Il est possible de mettre des animations en place directement via CSS.

animation-name

Détermine quelle animation va être jouée.

@keyframes

Cette règle CSS permet de définir les étapes d’une animation.

@keyframes slidein {
  0% {
    transform: translateX(0%) rotate(0deg);
  }
  
  50% {
    transform: translateX(50%) rotate(180deg);
  }

  100% {
    transform: translateX(100%) rotate(360deg);
  }
}

.item {
	animation-name: slidein;
}

animation-duration

Cette propriété détermine la durée de l’animation (généralement en secondes ou millisecondes).

.item {
	animation-name: slidein;
	animation-duration: 300ms; /* ou 0.3s (équivalent) */
}

animation-direction

Cette propriété détermine le sens de lecture de l’animation (en avant, en arrière ou alterner entre la lecture en avant et en arrière).

.item {
	animation-name: slidein;
	animation-direction: reverse; /* normal | reverse | alternate | alternate-reverse */
}

animation-fill-mode

Cette propriété définit comment les styles CSS sont appliqués à l’élément avant et après l’animation.

.item {
	animation-name: slidein;
	animation-fill-mode: forwards; /* l'élément garde le style de la dernière étape de l'animation */
}

animation-iteration-count

Cette propriété détermine le nombre de fois où l’animation est jouée (par défaut, une seule fois).

.item {
	animation-name: slidein;
	animation-iteration-count: infinite; /* l'animation est jouée en continue */
}

animation-timing-function

Cette propriété définit la façon dont une animation progresse pendant la durée de chaque cycle.