CSS animation generator

How to use the CSS animation generator

  1. Pick an animation type: entrance (fade-in, slide-in), exit, loop (pulse, float), or attention (shake, bounce).
  2. Adjust duration, delay, easing, and iteration count with sliders. The preview card animates live.
  3. For custom animations, click Keyframes mode — add waypoints at 0%, 25%, 50%, 75%, 100% and tune each one's transform and opacity.
  4. Copy the generated @keyframes rule and the animation shorthand.
  5. Toggle Tailwind output for arbitrary-value utilities.

When to use it

CSS animations are fastest and most energy-efficient for simple, deterministic motion — hover states, loading indicators, attention hints. They run on the GPU and don't block the main thread. Use JavaScript (GSAP, Framer Motion) when you need orchestration across multiple elements, runtime-driven values, or scroll-linked animation. Alternative: Animista offers more preset variety but requires stepping through a gallery; this tool lets you tune parameters directly.

Example

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.card { animation: fade-in-up 0.4s ease-out both; }

Entrance animation suitable for cards loading in on scroll. both preserves the starting state before the animation runs.

Frequently asked questions

What's animation-fill-mode for?
It controls the element's style before and after the animation runs. forwards keeps the end state, backwards applies the starting state during the delay, both does both.
Can I pause a CSS animation on hover?
Yes — toggle animation-play-state: paused with a :hover selector.
Why is my animation janky?
Almost always because it animates properties that force layout — width, height, top, left. Animate transform and opacity instead; they run on the GPU.
Do CSS animations respect reduced-motion?
Not by default. Wrap them in @media (prefers-reduced-motion: no-preference) to opt in only for users who haven't requested reduced motion.
How do I chain animations?
Either comma-separate multiple animations on one element, or use animation-delay to stagger them manually. For complex sequences, JavaScript is usually cleaner.

Related tools

Last updated: 2026-04-22