How to Create CSS Animations with Keyframes

To create CSS animations you define a sequence of styles with the @keyframes rule, then attach it to an element using the animation shorthand. The browser handles every frame in between, so you describe the start and end states and let CSS fill the gap.

Writing @keyframes

A @keyframes rule names an animation and lists the styles at points along its timeline. You can use the from and to keywords for a simple two-state animation, or percentages for multi-step sequences where 0% is the start and 100% is the end.

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

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

That animation line is the shorthand. Spelled out, the properties are:

animation-name: the @keyframes name to run.
animation-duration: how long one cycle takes, like 0.4s.
animation-timing-function: the easing curve, such as ease-out or linear.
animation-delay: how long to wait before starting.
animation-iteration-count: a number, or infinite to loop.
animation-direction: normal, reverse, alternate, or alternate-reverse.
animation-fill-mode: forwards keeps the final frame, backwards applies the first frame during the delay, both does each.

Transition vs animation

A transition animates a single change between two states, usually triggered by something like :hover or a class toggle. It is the simplest choice when you just need a property to move smoothly from one value to another.

An animation runs a defined keyframe sequence on its own, with multiple steps, looping, and precise timing. Reach for transition for state changes and animation when you need a self-running, multi-step, or repeating sequence.

Keep animations smooth and accessible

For performance, animate transform and opacity wherever you can. The browser can offload these to the GPU and they do not trigger layout or paint, so they stay smooth even on weaker devices. Animating properties like width, height, top, or margin forces layout recalculation on every frame and causes jank.

Accessibility matters too. Some people get motion sickness from large or fast movement, so honor their system setting with prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Build an animation visually

If you would rather see it as you tweak it, the CSS Animation Builder lets you design keyframes and copy the result.

Open the CSS Animation Builder.
Add keyframes and set the properties you want to animate at each step.
Adjust the duration, timing function, delay, and iteration count.
Preview the motion live in the browser.
Copy the generated @keyframes and animation shorthand into your stylesheet.

It runs entirely in your browser, so nothing you type is ever sent to a server.

CSS Gradient Generator: build layered backgrounds you can animate.
Box Shadow Generator: craft shadows for depth and hover states.
Border Radius Visualizer: shape corners before you animate them.

Describe the start and end, pick transform and opacity, respect reduced motion, and let the browser do the rest.