Générateur d’animation CSS de sprite sheet

Transformez une sprite sheet en une animation CSS steps() prête à copier-coller, avec un aperçu en direct, directement dans votre navigateur.

Votre sprite sheet est lue localement dans votre navigateur pour construire l’aperçu et générer le CSS ; l’image n’est jamais téléversée et reste sur votre appareil.

Vous nettoyez la sortie ? Essayez le Formateur CSS.

À propos de Animation CSS de sprite sheet

Ce générateur d’animation CSS de sprite sheet transforme une bande ou une grille de frames en une animation CSS prête à coller, construite sur @keyframes et la fonction de minutage steps(). Déposez une image de sprite sheet pour un aperçu en direct, ou saisissez simplement la largeur, la hauteur et le nombre de frames et laissez l’outil calculer la background-position à votre place. Il gère aussi bien une seule rangée horizontale qu’une grille complète, parcourant les frames en ordre par ligne à travers les colonnes puis les rangées, et associe les keyframes à background-size pour que chaque cellule tombe exactement au bon endroit. Réglez la vitesse par FPS ou par durée totale, nommez l’animation, choisissez une boucle infinie ou un nombre d’itérations fixe, et sélectionnez une direction. Vous obtenez le CSS complet — dimensionnement de l’élément, bloc @keyframes et raccourci d’animation — que vous pouvez copier ou télécharger sous forme de fichier .css. Tout s’exécute sur votre appareil, de sorte qu’une sprite sheet importée est lue localement et ne quitte jamais votre navigateur.

Fonctionnalités

Comment utiliser Animation CSS de sprite sheet

  1. Importez une sprite sheet, ou passez l’import et saisissez simplement les dimensions de vos frames.
  2. Choisissez rangée unique ou grille, puis définissez la largeur, la hauteur et le nombre de frames (plus les colonnes et rangées pour une grille).
  3. Réglez la vitesse avec les FPS ou une durée totale, puis nommez l’animation et choisissez l’itération et la direction.
  4. Observez l’élément s’animer dans l’aperçu en direct pour confirmer que le cadrage est bon.
  5. Copiez le CSS généré ou téléchargez-le sous forme de fichier .css et intégrez-le à votre projet.

Exemple

Entrée

8 frames, 64×64 each, single row, 12 fps, infinite

Sortie

.sprite {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  animation: sprite 0.667s steps(8) infinite normal;
}

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}

Une feuille en rangée unique ne nécessite que steps(8) et un keyframe à deux arrêts pour jouer toutes les frames.

Erreurs courantes et dépannage

Foire aux questions

Comment steps() anime-t-il une sprite sheet ?
steps(n) découpe l’animation en n segments égaux et saute de l’un à l’autre au lieu d’interpoler, de sorte que background-position bascule d’une frame à la suivante. Utiliser steps() égal à votre nombre de frames signifie que chaque frame est affichée pendant une étape, sans positions floues intermédiaires.
Dois-je importer mon image ?
Non. Importer une sprite sheet vous donne un aperçu en direct, mais vous pouvez générer un CSS correct à partir de la seule largeur, hauteur et nombre de frames. Sans image, l’aperçu affiche une grille d’espace réservé tandis que les calculs et la sortie restent exacts.
Quelle est la différence entre le mode rangée unique et le mode grille ?
Le mode rangée unique suppose que toutes les frames se trouvent sur une seule bande horizontale et émet un keyframe compact from/to. Le mode grille gère les feuilles multi-rangées en émettant un arrêt background-position par frame, se déplaçant à travers les colonnes puis vers le bas des rangées, et ajoute background-size pour que toute la feuille s’adapte correctement.
Dois-je régler les FPS ou une durée totale ?
Utilisez les FPS quand vous savez combien de frames doivent jouer chaque seconde ; l’outil les convertit en durée en divisant le nombre de frames par les FPS. Utilisez la durée totale quand vous voulez que toute la boucle prenne un nombre précis de millisecondes, quel que soit le nombre de frames.
Comment faire boucler l’animation indéfiniment ou seulement quelques fois ?
Choisissez Infinie pour une boucle sans fin, ce qui correspond à animation-iteration-count: infinite. Choisissez Nombre et saisissez un chiffre pour jouer la séquence un nombre fixe de fois, et utilisez l’option de direction pour une lecture inverse ou alternée.
Ma sprite sheet est-elle téléversée quelque part ?
Non. L’image est lue localement avec le FileReader de votre navigateur pour construire l’aperçu et elle ne quitte jamais votre appareil ; le CSS généré est calculé entièrement sur votre machine.

Outils associés

Tous les outils ArrayKit