CSS Keyframe Animation Generator — 79 Animation Presets

Pick an animation preset, adjust the duration, easing, fill-mode, direction, and iterations, then copy the CSS tab output. It includes the @keyframes block and the animation property — paste both into your stylesheet and apply the generated class name to any element. No JavaScript required.

"forwards" is the most common value — it holds the final keyframe state after the animation ends, so an entrance animation like fadeIn leaves the element visible. "none" (default) snaps back to the original style when done, which causes entrance animations to disappear immediately. "backwards" applies the first keyframe state during the delay period. "both" combines forwards and backwards.

Set the iteration count to "infinite" in the Iterations control. The exported CSS uses animation-iteration-count: infinite. Use direction: alternate for effects like pulse or bounce to create a back-and-forth oscillation rather than a jarring loop restart.

Generate the animation CSS with fill-mode: forwards so the element stays in its end state after the animation completes. Initially set the element's visibility: hidden or opacity: 0. Add the animation class via an IntersectionObserver callback when the element enters the viewport. The element will animate in and remain visible.

ease (default) starts and ends slowly with a fast middle. ease-in starts slowly and accelerates — feels like it's gaining momentum, good for exit animations. ease-out starts fast and decelerates — feels like it's settling in, good for entrance animations (elements feel like they slide into place). ease-in-out is slow at both ends.

Switch to the React tab. The output includes the @keyframes block inside a <style> JSX tag and the animation applied via a className with a scoped auto-generated name. Copy and paste into any React component.

Copy the generated CSS and apply the animation property only in the :hover selector of your element: .element:hover { animation: fadeIn 0.3s ease forwards; }. The animation triggers when the cursor enters the element. Set fill-mode to none so it resets when the cursor leaves.

animation-direction controls whether each cycle plays forward or backward. "normal" (default) plays forward every cycle. "reverse" plays backward every cycle. "alternate" plays forward on odd cycles and backward on even cycles — this creates a natural oscillation for effects like pulse, bounce, and swing without a jarring jump back to the start state. "alternate-reverse" starts in reverse. For looping ambient animations (a floating icon, a breathing glow, a bouncing badge), direction: alternate with iteration-count: infinite produces the most natural-looking result.

Staggered animations use different animation-delay values for each element. Generate the base animation CSS here, then apply it to each element with an increasing delay: the first gets delay: 0s, the second delay: 0.1s, the third delay: 0.2s, and so on. Use CSS custom properties to make this scalable: --i: 0, --i: 1, --i: 2 on each element, then animation-delay: calc(var(--i) * 0.1s). Set fill-mode: backwards so each element stays hidden during its delay period — otherwise all elements will briefly show at their final state before animating.

Easing controls how the animation progresses through its keyframes over time — it sets the acceleration curve. "ease" starts slow, speeds up, then slows down at the end — a natural feel for most UI motion. "linear" moves at a constant rate the entire time — good for spinners and continuous rotation. "ease-in" starts slow and accelerates — suitable for exit animations where elements leave the screen. "ease-out" starts fast and decelerates — best for entrance animations where elements arrive and settle. "ease-in-out" is slow at both ends — ideal for elements that move across the screen from one position to another. For custom curves, use cubic-bezier(x1, y1, x2, y2).

Switch to the Tailwind tab in the export panel. The output uses Tailwind's arbitrary value syntax for the animation property: className="[animation:fadeIn_0.5s_ease_forwards]". The @keyframes block still needs to be added to your global CSS — paste it into your globals.css or tailwind.css file. For animations you use frequently, add them to tailwind.config.js under theme.extend.keyframes and theme.extend.animation — then you can use the named class like animate-fadeIn instead of an arbitrary value.

Transitions are simpler and better for state changes triggered by interaction — hover, focus, active. They interpolate between two states (before and after) automatically when the property changes. Animations with @keyframes are better for sequences that run on load, scroll triggers, or need multiple steps between start and end — like a bounce that overshoots, a shake with multiple oscillations, or a multi-step entrance that fades in and slides up simultaneously. Transitions require a state change to trigger; animations can start automatically and repeat independently of user interaction.