CSS Animation & Transition Generator
Build a CSS transition or a simple @keyframes animation with adjustable duration, easing and delay, with a live preview.
Your file is processed locally in your browser and is not uploaded to our server.
ms
ms
CSS
transition: all 300ms ease 0ms;
How to use CSS Animation & Transition Generator
- 1Transition mode: pick a property, duration, easing and delay for a simple state-change transition.
- 2Animation mode: pick a duration, easing and iteration count for a keyframe fade/slide-in animation.
- 3Click Play to preview, then copy the generated CSS.
Frequently asked questions
A transition animates between two states (like on hover), triggered by a property change. An animation uses @keyframes to define its own sequence and can run automatically or repeat.
Related tools
Developer
CSS Filter Generator
Build a CSS filter (blur, brightness, saturate, etc.) visually.
Developer
CSS Transform Generator
Build a CSS transform (translate/rotate/scale/skew) visually.
Developer
CSS Glassmorphism Generator
Build a frosted-glass CSS card effect visually.
Developer
CSS Border Generator
Build a CSS border and border-radius visually.
Developer
JSON Formatter
Format and beautify JSON with adjustable indentation.