Build a CSS keyframe animation — fade, slide, bounce or spin — with a live preview. Control
duration, delay, iteration count and a custom cubic-bezier() easing curve, then copy the generated
@keyframes and animation CSS or the equivalent Tailwind classes.
Define an @keyframes rule with the states you want, then apply it with the animation property (name, duration, easing, delay, iteration count). This generator builds both for you visually.
transition animates a property change between two states triggered by something (like :hover); animation runs independently via @keyframes and can have multiple steps, loop, and run automatically on load.
cubic-bezier(x1, y1, x2, y2) defines a custom acceleration curve for the animation-timing-function. This generator lets you drag the four control points and preview the result live.
Set animation-iteration-count: infinite. This generator has an infinite toggle alongside a fixed iteration count option.
Animate opacity from 0 to 1 inside an @keyframes rule, typically with ease-out timing. Pick the fade preset here and adjust duration/delay to match your use case.
Yes. Toggle Tailwind mode to get the closest matching Tailwind animation utility classes instead of raw @keyframes CSS.
Yes — completely free with no sign-up, and it runs entirely in your browser.
Yes, toggle the light/dark preview to see how the animation reads on both backgrounds.