La propriété CSS steps() est une fonction temporelle permettant de contrôler le déroulement d’une animation en la découpant en plusieurs étapes. Elle est efficace pour créer des animations basées sur un système de sprite.

Le fonctionnement est le suivant :

• La propriété (animation: animation .9s steps(8) infinite, avance 5s linear infinite;) permet d’indiquer le nombre de marche de l’animation
• Les @keyframes (background-position et transform) indiquent la position et la direction de l’animation.

.bloc-animation {
      position: absolute;
      top: 170px;
      width: 240px;
      height: 120px;
      margin: 2em;
      background-image: url("images/anim.png");
      animation: animation .9s steps(8) infinite, avance 5s linear infinite;
      animation-play-state: paused;
}
@keyframes animation {
      from {
          background-position: 0px;
      }
      to {
          background-position: -1920px;
      }
}
@keyframes avance {
      from {
          transform: translate(-280px, 0);
      }
      to {
          transform: translate(480px, 0);
      }
}

Pour créer des animations à base de sprite, on créé une image contenant nos sprites sur une seule ligne verticale ou horizontale. Puis on va jouer sur le background-position pour déplacer notre image et donner cette impression d’animation.

Le Sprite du puma

Mise en pratique de l’animation Sprite

Cliquez sur le bouton « Lecture » ci-dessous, et le tour est joué !