How to Build a CSS Animation With a Keyframe Timeline

A CSS animation is a set of keyframes plus a duration and an easing curve, and writing one blind means reloading until the motion feels right. FindUtils CSS Animation Generator gives you a visual keyframe timeline, several properties at once, and easing curves, then hands you the CSS.

This guide covers how to structure keyframes, which properties are cheap to animate, and why easing does more for the feel than duration does.

How Does a Keyframe Timeline Work?

A keyframe is a snapshot of the properties at one point in the animation, written as a percentage of its duration. The browser interpolates everything between two snapshots.

@keyframes slide-up {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.card {
  animation: slide-up 300ms ease-out forwards;
}

Two keyframes is the common case, and most UI motion needs nothing more. Add a middle keyframe only when the motion genuinely changes direction or character partway through - a bounce, a pulse, an attention shake.

forwards matters more than it looks: without it the element snaps back to its pre-animation state when the animation ends.

Which Properties Are Cheap to Animate?

Two of them, and the difference is not subtle.

Animate transform and opacity wherever the effect allows it. To move something, use translate rather than top/left. To resize it, use scale rather than width/height. The visual result is nearly identical and the browser does a fraction of the work.

Adding will-change: transform promotes the element to its own layer, which helps a heavy animation and hurts if applied to many elements at once, because each layer costs memory.

Why Does Easing Matter More Than Duration?

Because linear motion looks mechanical at any speed, while a well-chosen curve reads as natural even when the duration is slightly off.

The defaults cover most cases:

• ease-out for things arriving - menus, modals, cards entering. Fast start, gentle landing, which reads as responsive.
• ease-in for things leaving. Gentle start, quick exit.
• ease-in-out for something that moves and returns.
• linear almost never, except for continuous rotation like a spinner.

When the keywords are not enough, the Cubic Bezier Generator builds a custom curve - including overshoot, where the value passes its target and settles back, which no keyword can express.

Durations that hold up: 150–200ms for hovers and small state changes, 200–300ms for panels and modals, 300–500ms for anything crossing a large part of the screen. Above 500ms a UI animation starts feeling like a wait.

What About Users Who Do Not Want Motion?

Respect their setting. It is one media query and it is not optional for accessibility - vestibular disorders make large motion genuinely unpleasant.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

This keeps the end state - elements still arrive where they should - while removing the travel.

Is Anything Uploaded?

No. The timeline and the generated CSS live in your browser. The page itself loads advertising and analytics scripts like the rest of the site.

Common Mistakes

Mistake 1: Animating width, height, top or left

Each forces layout every frame. Use transform: translate() and scale().

Mistake 2: Forgetting forwards

Without a fill mode the element snaps back to its starting state the moment the animation finishes.

Mistake 3: Linear Easing on UI Motion

It reads as mechanical. Use ease-out for entrances as a default.

Mistake 4: Ignoring prefers-reduced-motion

It is a real accessibility requirement, and it is one media query.

Mistake 5: Too Many Keyframes

Most UI motion needs two. Extra keyframes usually add complexity rather than character.

Tools Used in This Guide

• CSS Animation Generator — Visual keyframe timeline, multiple properties
• Cubic Bezier Generator — Custom easing, including overshoot
• SVG Animation Generator — Animate paths and shapes
• Lottie Editor — When the motion is beyond CSS
• Box Shadow Generator — Shadows for the elevation an animation implies

FAQ

Q1: Is the CSS animation generator free? A: Yes. No signup, no limits, and the CSS is generated in your browser.

Q2: What is the difference between a transition and an animation? A: A transition interpolates between two states when something changes, such as a hover. An animation runs a keyframe sequence on its own, can loop, and can define as many intermediate states as you want.

Q3: Which properties should I animate for performance? A: transform and opacity. Both are handled by the compositor without layout or repaint. Avoid animating width, height, top, left, margin and padding.

Q4: How long should a UI animation be? A: 150–200ms for small state changes, 200–300ms for panels, up to 500ms for large movements. Longer starts to feel like latency.

Q5: How do I make an element stay where it ends up? A: Add forwards as the fill mode. Without it the element returns to its pre-animation state.

Q6: Do I need vendor prefixes? A: No. CSS animations have been unprefixed in every current browser for years.

Next Steps

• Need a curve no keyword provides? Build one in the Cubic Bezier Generator.
• Animating a path or shape? Use the SVG Animation Generator.
• Beyond what CSS can express? The Lottie Editor handles richer motion.