Create Stunning CSS Animations with Keyframes and Presets
A powerful tool for creating CSS animations with support for single animations, multi-animation compositions, staggered effects, and export to CSS, Framer Motion, or Tailwind CSS. Perfect for enhancing your UI with professional animations.
The CSS Animations Generator allows you to create professional CSS animations with multiple modes: single animation builder, multi-animation composer, and staggered effects. Whether you need a simple fade-in or a complex animated sequence, this tool makes it easy to visualize and export your animations.
Tip: The tool supports undo/redo functionality. Use Ctrl+Z and Ctrl+Y (or Cmd+Z and Cmd+Shift+Z on Mac) to navigate through your changes.
The Builder tab is where you create single animations. It provides comprehensive controls for customizing every aspect of your animation.
Set how long the animation takes to complete. Range: 100ms to 5000ms. Shorter durations create snappier animations, while longer durations create smoother, more dramatic effects.
Set a delay before the animation starts. Useful for sequencing multiple animations or creating staggered effects within a single element.
Choose from preset easing curves (ease-in, ease-out, ease-in-out, linear) or enter a custom cubic-bezier function for precise control over the animation's timing.
Set how many times the animation repeats. Use -1 for infinite looping, or specify a finite number of repetitions.
Control the animation direction: normal (forward), reverse (backward), or alternate (forward then backward). Alternate creates ping-pong effects.
Give your animation a custom name for the generated keyframes. This makes it easier to identify and reuse animations in your codebase.
The Live Preview panel shows a real-time preview of your animation. You can replay the animation by clicking on the preview element or using the replay button. The preview updates instantly as you adjust settings.
The tool includes seven preset animation types, each optimized for different visual effects. You can also create custom keyframes for unique animations.
Animates opacity from 0 to 1 (or reverse). Perfect for entrances, exits, and modal dialogs. Use with duration adjustments for subtle or dramatic fades.
Animates position horizontally or vertically. Great for drawers, dropdowns, and slide-in notifications. Combine with fade for smooth transitions.
Animates the size of an element using transform: scale(). Ideal for hover effects, emphasis animations, and loading spinners.
Rotates an element around its center. Perfect for loading indicators, checkmarks, and attention-grabbing effects. Combine with scale for spinning.
Creates a bouncing effect with gravity simulation. Great for playful notifications, success messages, and fun UI interactions.
Creates a rhythmic scaling animation. Perfect for attention-grabbing elements, live indicators, and heartbeat visualizations.
Creates a pendulum-like rotation animation. Great for hanging elements, decorative animations, and playful UI components.
The Composer tab allows you to combine multiple animations on a single element. This powerful feature enables you to create complex, multi-step animations that would be difficult to achieve with a single keyframe definition.
Animations play one after another in order. The total duration is the sum of all animation durations. Best for storytelling animations and guided user experiences.
Animations play simultaneously. The total duration is the maximum of all animation durations. Best for combining effects like fade + scale + rotate.
Note: Custom keyframes are not supported in the Composer. Only preset animation types can be combined. Use the Staggered tab for custom keyframe sequences across multiple elements.
The Staggered tab allows you to create animations that play sequentially across multiple elements. This is perfect for list animations, staggered entrances, and wave effects.
Animate list items one by one for elegant entrances. Perfect for todo lists, menus, and card grids.
Stagger image or card grid animations to create visual interest. Works great with fade-up or scale effects.
Create wave-like patterns by adjusting stagger delays and animation types. Great for loading states and decorative elements.
For advanced animations, you can create custom keyframes with precise control over each percentage step of the animation. This feature is available in the Builder tab.
Tip: Custom keyframes are exported as standard CSS @keyframes rules. They provide maximum flexibility but cannot be used in the Composer (use preset animations instead).
The Code tab generates production-ready code in three formats: CSS, Framer Motion, and Tailwind CSS. Copy the code directly or download it as a file.
Generates standard CSS with @keyframes rules and animation properties. Works in any modern browser without dependencies.
Generates Framer Motion component code with variants and transition props. Perfect for React projects using the Framer Motion library.
Generates Tailwind CSS configuration with custom keyframes and animation classes. Ready to add to your tailwind.config.js file.
.myAnimation {
animation: myAnimation 1s ease-in-out infinite alternate;
}
@keyframes myAnimation {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}const myAnimation = {
initial: { scale: 1, opacity: 1 },
animate: { scale: 1.1, opacity: 0.8 },
transition: {
duration: 1,
ease: "easeInOut",
repeat: Infinity,
repeatType: "reverse"
}
};The Animation Library provides a collection of pre-made animations that you can apply instantly. Browse through the library to find animations for common use cases or as starting points for customization.
Fade-ins, slide-ups, and scale animations for element entrances. Perfect for page loads and modal dialogs.
Pulse, bounce, and shake animations to grab user attention. Great for notifications and alerts.
Continuous animations like spinning, breathing, and hovering. Ideal for loading states and live indicators.
The I/O (Input/Output) tab allows you to save your animation configurations for later use and share them with others.
Downloads the complete animation configuration as a JSON file. This includes all settings for later import and editing.
Loads a previously exported configuration file. Supports JSON files exported from this tool.
Copies the generated CSS code directly to your clipboard. One-click export for quick integration.
Note: Only configuration files exported from this tool are supported. Invalid or corrupted files will show an error message.
Speed up your workflow with these keyboard shortcuts:
| Action | Windows/Linux | Mac |
|---|---|---|
| Undo | Ctrl + Z | Cmd + Z |
| Redo | Ctrl + Y | Cmd + Shift + Z |
| Reset Animation | - | - |
Use pulse or rotate animations with infinite repetition for loading indicators. Combine with Tailwind CSS for easy integration.
Create interactive buttons and cards with scale or bounce animations on hover. Use the exported CSS in your :hover states.
Use fade and scale animations with entrance/exit states for smooth modal dialogs. The composer helps create complex sequences.
Use staggered animations to animate list items sequentially. Perfect for todo lists, card grids, and menu animations.
Create celebratory animations with bounce and scale for success messages, form submissions, and completion indicators.
Export to Framer Motion for React projects. Get variants and transition props ready to use with motion components.