CSS Animation Generator
Build CSS @keyframes animations from 20 built-in presets (fade, slide, bounce, pulse, spin, shake, and more) or write custom keyframes. Live preview with duration, delay, easing, iteration, and fill-mode controls.
@keyframes tw-anim-bounce-preview {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.element {
animation: tw-anim-bounce-preview 1s ease 0s infinite normal none;
}About CSS Animation Generator
CSS animations use @keyframes rules to define a sequence of styles that the browser interpolates over a specified duration. This Animation Generator ships with 20 built-in presets (fadeIn, slideInLeft, bounce, pulse, spin, shake, swing, rubberBand, wobble, flipX, glow, float, breathe, and more) plus full controls for duration, delay, iteration count, easing curve, direction, and fill mode.
The @keyframes body is directly editable — start from a preset and customize the intermediate keyframes to your liking. Live preview lets you replay the animation on demand to see the exact effect before shipping. Copy the full CSS (both @keyframes rule and the animation shorthand on the element) into your project. Ideal for building attention-grabbing button hover states, entrance animations, notification badges, and micro-interactions.
How to Use
Pick a preset from the dropdown — 20 common animation patterns are included.
Adjust timing: duration (in seconds), delay, and iteration count (or 'infinite' for looping).
Choose easing (ease, linear, cubic-bezier, etc.) and direction (normal, reverse, alternate).
Edit the @keyframes text directly to customize the animation. The preview updates live.
Click Replay to restart the animation at any time.
Copy the complete CSS (both @keyframes rule + animation shorthand) into your project.
Frequently Asked Questions
Should I use CSS animations or JavaScript animations?
CSS animations for simple state changes and looping effects (spinners, hover pulses, entrance animations). JavaScript (or Framer Motion / GSAP) for complex interactive animations that need to respond to user input, physics, or dynamic values. CSS is faster (GPU) but less flexible.
What's the difference between iteration-count infinite vs finite?
Infinite loops forever. A number (e.g., 3) plays the animation that many times then stops on the last keyframe (or reverts, depending on fill-mode).
What does fill-mode do?
Controls what happens BEFORE the animation starts and AFTER it ends. 'forwards' keeps the final keyframe state. 'backwards' applies the first keyframe during the delay. 'both' does both. 'none' (default) reverts to the pre-animation styles.
How do I add custom easing curves?
Use cubic-bezier(x1, y1, x2, y2). cubic-bezier.com is a great visual editor. For bouncy effects, try cubic-bezier(0.68, -0.55, 0.265, 1.55). Standard Material easing is cubic-bezier(0.4, 0, 0.2, 1).
Animate UI — Animated React Components for Modern Web Applications
Modern users expect interfaces that feel smooth, responsive, and visually engaging — but managing complex animation logic slows every team down. Animate UI is the React component library that ships polished animations by default, so developers can focus on features.
Read the full guideCSS transform builder — translate, rotate, scale, skew with 2D/3D support.
Multi-layer CSS box-shadow builder with inset support and presets.
Format, beautify, and validate JSON instantly.
Convert JSON arrays into CSV for spreadsheets.