CSS Animation Generator

Build keyframe animations with a visual editor. Preview fade, slide, bounce, rotate, and custom sequences, then copy the CSS into your project.

CSS Animation Generator

Create custom CSS animations with keyframe editor and animation properties

Presets

Keyframes

Keyframe 1

Percentage

Opacity

Transform

Keyframe 2

Percentage

Opacity

Transform

Duration: 1000ms

Delay: 0ms

Timing Function

Iteration Count

Direction

Fill Mode

@keyframes customAnimation {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animated-element {
  animation: customAnimation 1000ms ease 0ms 1 normal forwards;
}

How CSS animations work

Keyframes describe styles along a timeline (0% to 100%). The animation properties control duration, easing, delay, repeats, direction, and fill mode. Unlike a hover transition, a keyframe animation can loop or play without a user gesture.

Keyframes

Each stop sets the style at that point in the run.

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

Common properties

duration: how long one cycle lasts
timing-function: ease, linear, cubic-bezier, and friends
delay: wait before the first cycle
iteration-count: number of repeats or infinite
direction: normal, reverse, alternate
fill-mode: styles before/after the active run

Useful presets

Fade in

Opacity from 0 to 1. Common for content reveals.

Slide in

Translate from off-screen. Fits drawers and panels.

Bounce

Playful overshoot. Use sparingly for notices.

Rotate

Continuous spin for loaders and light decoration.

Scale

Grow from zero. Works for modals and popovers.

Shake

Quick horizontal jitter for error feedback.

Frequently asked questions

What is the difference between animations and transitions?

Transitions move between two states (often hover). Animations use keyframes, can have many steps, and can run on their own. Use transitions for simple state changes; use animations when you need a sequence or autoplay.

How do I keep animations smooth?

Prefer transform and opacity—those usually stay on the compositor. Animating width, height, top, or left forces layout and often drops frames. Aim for about 60fps on the devices you care about.

Can I run more than one animation on an element?

Yes. List them comma-separated on the animation property. Each can have its own duration, delay, and timing function.

Which timing functions should I use?

ease-in-out works for many UI moves. ease-out feels good for entrances. linear fits continuous loops like spinners. Use cubic-bezier when you need a custom curve.

Should I respect prefers-reduced-motion?

Yes. Wrap decorative motion in @media (prefers-reduced-motion: reduce) and shorten or disable it. That avoids making the UI harder for people sensitive to motion.

Need to paste existing keyframes instead? Try the CSS Animation Previewer.