@keyframes cssap-anim {
from { transform: translateX(0); }
to { transform: translateX(120px); }
}
.preview {
animation: cssap-anim 800ms cubic-bezier(0.42,0,0.58,1) 0ms infinite;
}Ce que ça fait
Le bac à sable d’animations CSS vous laisse concevoir et prévisualiser des animations CSS en direct dans votre navigateur. Choisissez une propriété animée (déplacement, échelle, fondu, rotation), réglez une durée et un délai, choisissez une courbe d’easing intégrée - ou sculptez votre propre cubic-bezier en tirant les poignées des points de contrôle - puis copiez le CSS exact @keyframes et animation à coller tel quel dans votre projet. Tout s’exécute côté client, donc rien de ce que vous réglez ne quitte votre machine.
Comment l’utiliser
- Utilisez le contrôle segmenté Propriété pour choisir ce qui s’anime : Déplacement (
translateX), Échelle, Fondu (opacity) ou Rotation (rotate). - Réglez Durée (ms) et Délai (ms) avec les compteurs numériques.
- Choisissez un easing prédéfini (Linear, Ease, In, Out, In-out), ou sélectionnez Custom pour ouvrir l’éditeur de courbe.
- Dans l’éditeur de courbe, tirez les deux poignées d’accent pour modeler le cubic-bezier. Le chemin bleu et l’aperçu se mettent à jour instantanément pendant que vous tirez.
- Basculez Itérations entre Une fois et Boucle.
- Pressez Play pour rejouer l’aperçu depuis le départ à tout moment, ou Reset pour restaurer les valeurs par défaut.
- Copiez le CSS généré depuis le panneau de sortie.
Exemples
Un fondu vif (ease-out, 250 ms, une fois)
@keyframes cssap-anim {
from { opacity: 1; }
to { opacity: 0.15; }
}
.preview {
animation: cssap-anim 250ms cubic-bezier(0,0,0.58,1) 0ms 1;
}Un easing personnalisé
Réglez Easing sur Custom, puis tirez la première poignée vers le coin bas-gauche et la seconde vers le coin haut-droit pour un démarrage rapide et une pose en douceur. Le cubic-bezier(...) généré se met à jour en conséquence - copiez-le dans votre propre règle transition ou animation.
Bon à savoir
- Easing personnalisé : tirez les deux poignées d’accent à l’intérieur de la boîte unité pour modeler la courbe ; le chemin en direct et l’aperçu suivent vos retouches en temps réel.
- Prêt à copier-coller : renommez les keyframes
cssap-animet le sélecteur.previewpour les faire correspondre à votre propre balisage - le reste du CSS est prêt pour la production. - Privé : l’outil entier s’exécute dans votre navigateur - aucun paramètre d’animation n’est jamais envoyé à un serveur.
- Outils liés :
Base64Base64An encoding representing binary data as 64 safe ASCII characters, so it survives transport through text-only channels. It encodes — it does not encrypt.
, JSON Formatter, et le reste de la gamme CSS & Layout.