Comment utiliser : CSS Animation Generator
- Pick a preset — hover the tiles to preview them — or start from a blank keyframe.
- Set duration, delay, iterations, easing and the trigger (load, hover, click, scroll).
- Edit keyframes on the timeline: click to add one, drag to move it, then adjust its properties with the sliders.
- Scrub, slow down or turn on onion skin to fine-tune, then copy the CSS, Tailwind or HTML.
What you can build
- Keyframe timeline — add as many keyframes as you like, drag them to new percentages, and give each its own easing.
- Properties — translate X/Y, rotate, 3D rotate X/Y, scale, skew, opacity, blur, glow (box-shadow), background color and border radius. Missing values are interpolated, so transforms never jump.
- Triggers — on load, hover, click, when scrolled into view, or a CSS-only scroll-driven animation.
- Stagger — animate a list one item after another with a single CSS custom property.
- Inspect — pause, scrub frame by frame, slow down to ¼ speed and switch on onion skin to see every keyframe at once.
- Export — CSS shorthand or longhand, HTML, JavaScript, Tailwind v3 and v4, a SCSS mixin, a standalone demo file or a share link.
The animation shorthand
| Part | Example | Meaning |
|---|---|---|
| name | fade-in-up | The @keyframes rule to run |
| duration | 0.6s | Length of one cycle |
| timing function | cubic-bezier(.33,1,.68,1) | Speed curve between keyframes |
| delay | 0.2s | Wait before starting; negative values start part-way through |
| iteration count | infinite | How many cycles |
| direction | alternate | Play backwards on every other cycle |
| fill mode | both | Keep the first frame before and the last frame after playing |
Accessibility
Some people get dizzy or nauseous from motion. With Respect prefers-reduced-motion on, the CSS switches the animation off for visitors who have enabled “reduce motion” in their operating system. Avoid flashing more than three times a second, and keep looping animations subtle or give users a way to pause them.
Performance tips
Animate transform and opacity instead of top, left, width or margin, which force layout on every frame. Add will-change only to elements that are about to animate. Shape your easing with the cubic-bezier generator, add a spinner from the CSS loader generator, and pair animations with box shadows or gradients.
Aussi recherché comme : css animation, keyframe animation, css animation maker, animate css, css animation online, animation code generator, css effects.
Outils complémentaires : CSS Animation Generator
- CSS Keyframes Generator — A visual editor for @keyframes.
- CSS Hover Animation Generator — Design hover animations for buttons, cards, links and icons.
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
- PX to REM Converter — Convert between pixels, rem and em with your own root font size — or paste a whole stylesheet and convert every px value in one go.
Questions fréquentes
Is the generated CSS free to use?
Yes. Every preset was written for this tool and the output is plain CSS with no library, license or attribution required.
Can I edit an animation I already have?
Yes. Open Import existing @keyframes, paste your CSS and it is turned into editable keyframes. Opacity, transforms (translate, rotate, rotateX/Y, scale, skew), blur, background color, border radius and glow shadows are supported.
How do I start the animation when the element scrolls into view?
Choose the trigger When scrolled into view for a tiny IntersectionObserver script that works everywhere, or Scroll-driven (CSS only) for
animation-timeline: view() with no JavaScript in browsers that support it.Does it work with Tailwind CSS?
Yes. The Tailwind tabs give a
tailwind.config.js block for v3 and an @theme block for v4, so you can use the animation as an animate-* class.Which properties are best for smooth animation?
transform and opacity run on the GPU compositor and stay smooth even on slow phones. Blur, shadows, colors and border radius cost more, so use them sparingly on large elements.Puis-je installer CSS Animation Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Animation Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.