Créer une animation avec un Sprite
Un sprite est une alternative simple et rapide pour intégrer une animation sur votre site web.
Comment ça fonctionne ?
Un sprite se présente sous la forme d'une image PNG (Vericale ou horizontale) qui contient l'ensemble des frames de votre animation (Voir exemple ci-dessous).
Comment créer l'animation dans le code ?
Dans le code, l'animation est très basique. Dans le html, il suffit de créer une div avec une class qui correspondra à celle de votre image. Et dans le CSS, vous allez appeler votre sprite et définir la taille (égale à une frame) et le nombre de frames. Dans l'animation, vous allez préciser la taille totale de votre sprite.
Dans l'exemple ci-dessous, le sprite est vertical, la largeur est donc toujours la même.
html :
<div class="MonSprite"></div>
css :
.MonSprite {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-1.png");
background-repeat: no-repeat;
-webkit-animation: anim-sprite steps(16); /* Nombre de frames dans le sprite */
animation: anim-sprite steps(16); /* Nombre de frames dans le sprite */
-webkit-animation-duration: 2s; /* Durée de l'animation */
animation-duration: 2s; /* Durée de l'animation */
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
min-width: 194px; /* Largeur du sprite */
min-height: 255px; /* Hauteur d'une frame (Hauteur du sprite / Nombre de frames) */
background-position: 0 top;
}
@-webkit-keyframes anim-sprite {
to {
background-position: 0 -4080px; /* (Hauteur du sprite) */
}
}
@keyframes anim-sprite {
to {
background-position: 0 -4080px; /* (Hauteur du sprite) */
}
}