CSS3 – animation + steps

J’ai découvert récemment la fonction steps() qui peut être utilisé avec les animations CSS3.

Comment steps() fonctionne ?

@keyframes anim {
   form {
      width: 0px;
   }
   to {
      width: 100px;
   }
}

@-webkit-keyframes anim {
   form {
      width: 0px;
   }
   to {
      width: 100px;
   }
} 
div {
   animation: anim 0.7s steps(4) infinite;
   -webkit-animation: anim 0.7s steps(4) infinite;
}

Ici on défini 4 étapes pour notre animation. C’est à dire que notre div va passer de 0px de large à 100px de large en 4 étapes : 25px, 50px, 75px et 100px.
On met le préfixe -webkit pour Chrome, Opéra et Safari. A noter que Pour Internet Explorer la propriété @keyframes n’est supporté qu’a partir de la version 10.

Pour mieux comprendre nous allons voir comment on peut utiliser steps() pour animer un sprite d’un personne de jeu vidéo (Link de Zelda en l’occurrence) :

Notre but va être de définir une div avec comme background ce sprite, et de créer une animation qui décale le background pour obtenir l’illusion du mouvement :

<div id="sprite"></div>

On définit le CSS qui va bien :

#sprite {
   width: 90px;
   height: 90px;
   background: url('sprite.png') 0px 0px no-repeat;
}

Maintenant il suffit de créer notre petite animation  :

#sprite {
   width: 90px;
   height: 90px;
   background: url('sprite.png') 0px 0px no-repeat;
   animation: anim 0.7s steps(4, end) infinite;
   -webkit-animation: anim 0.7s steps(4, end) infinite;
}

@keyframes anim {
   form {
       background-position: 0px 0px;
   }
   to {
      background-position: -360px 0px;
   }
}

@-webkit-keyframes anim {
   form {
       background-position: 0px 0px;
   }
   to {
      background-position: -360px 0px;
   }
}

Donc on définit un animation qui dure 0,7 seconde, qui est en 4 étapes (5 avec l’étape de départ, c’est pour ça qu’on met le deuxième paramètre à end, pour que le décompte commence à la fin de la première étape et non dès le début, sinon il manquera une image dans l’animation). infinite permet à l’animation de se répéter.

Voir la démo

Voila, c’est tout ! Pour réaliser les autres animations présentes dans le sprite il suffirait de décaler le background-position en y, sur le même principe.