Générateur d'Animation Sprite CSS
Générez automatiquement du code d'animation CSS
à partir de plusieurs images ou d'une feuille de sprites
📏 Paramètres de grille
⚙️ Paramètres d'animation
🎞️ Ordre des trames
Faites glisser pour réorganiserÀ propos du générateur d'animations Sprite
Le Générateur d'Animations Sprite CSS est un outil en ligne gratuit qui génère automatiquement du code CSS pour les animations à l'aide de la propriété animation et de la fonction steps(), à partir de plusieurs images de trames ou d'une feuille existante.
Contrairement aux animations GIF, les sprites CSS offrent une qualité d'image élevée sans dégradation. Ils vous permettent de contrôler de manière flexible la vitesse, la direction et l'itération directement via CSS.
Tout est traité entièrement dans votre navigateur. Vos images ne sont jamais téléchargées sur un serveur.
Comment créer des animations Sprite CSS
Charger des images
Sélectionnez une feuille de sprites fusionnée, ou téléchargez plusieurs images pour les combiner.
Ajuster l'animation
Vérifiez l'aperçu en direct, définissez les colonnes et les lignes, la vitesse et la direction.
Obtenir le code
Téléchargez l'image générée et copiez le code CSS/HTML automatique dans votre projet.
Propriétés CSS expliquées
Comment fonctionne CSS animation + steps()
La fonction steps() est utilisée dans la propriété CSS animation-timing-function pour modifier la valeur par étapes discrètes.
Dans l'animation de sprites, cette propriété est utilisée pour décaler instantanément la background-position de la largeur d'une trame.
| Propriété | Description | Rôle dans les Sprites |
|---|---|---|
| animation-timing-function | La courbe de l'animation | Définir steps(N) empêche les transitions fluides. |
| background-position | La position de départ du fond | Modifiée dans @keyframes pour afficher les trames. |
| animation-duration | Le temps d'un cycle | Détermine la vitesse de lecture (FPS). |
Glossaire d'animation
- Feuille de Sprites (Sprite Sheet)
- Une grande image contenant plusieurs petites images (trames) disposées dans une grille.
- Fonction steps()
- Une fonction CSS qui modifie les valeurs par étapes discrètes au lieu d'une transition fluide.
- @keyframes
- Règle CSS utilisée pour définir les états intermédiaires d'une animation.
- background-position
- Propriété CSS spécifiant la position de départ de l'arrière-plan.
- Canal Alpha
- Les données d'image pour la transparence. L'utilisation du PNG permet des dégradés semi-transparents.
Foire Aux Questions
- Q.Mes images sont-elles enregistrées sur un serveur ?
- Non. Cet outil traite les images localement dans votre navigateur, ce qui est sûr pour les fichiers confidentiels.
- Q.Quelle est la différence entre les animations GIF et les sprites CSS ?
- Les GIF sont limités à 256 couleurs et manquent de semi-transparence. Les sprites CSS utilisent le format PNG pour une haute qualité.
- Q.Puis-je fusionner des images de tailles différentes ?
- Ce n'est pas recommandé. Toutes les trames doivent avoir les mêmes dimensions, sinon l'outil les ajustera selon la première image.
- Q.Comment corriger le flou sur les écrans Retina ?
- Créez votre feuille avec le double de la résolution souhaitée, puis utilisez
background-sizepour la réduire. - Q.Y a-t-il une taille maximale recommandée ?
- Maintenez les dimensions en dessous de 2048x2048 pour éviter une utilisation excessive de la mémoire sur les appareils mobiles.
Cas d'utilisation
Animations de chargement
Idéal pour les indicateurs de progression fonctionnant via CSS.
Mouvement de personnage
Créez des boucles d'action (ex. marcher) pour des personnages web.
Icônes interactives
Générez des animations fluides déclenchées lors du survol (hover).
Bannières publicitaires
Concevez des bannières animées attrayantes avec une qualité d'image supérieure.
Envoyer des commentaires
Faites-nous part de vos réflexions pour nous aider à améliorer l'outil.
Les commentaires sont temporairement suspendus
Le serveur est occupé ou la protection anti-spam est active. Veuillez réessayer plus tard.