# How to Generate a CSS Animation

> Create CSS keyframe animations with a visual timeline editor. Design smooth transitions, entrance effects, and looping animations.

- URL: https://www.browserutils.dev/how-to/generate-css-animation
- Published: 2026-08-13
- Updated: 2026-07-02

---

## Step 1: Choose an animation preset or start from scratch

Pick from common animation presets like fade in, slide up, or bounce, or start with a blank timeline to build a fully custom animation.

## Step 2: Define keyframes

Add keyframe points along the timeline and set CSS properties at each point. Change transform, opacity, color, or any animatable CSS property.

## Step 3: Configure timing and easing

Set the animation duration, delay, and iteration count. Choose an easing function like ease-in-out or cubic-bezier for natural-feeling motion.

## Step 4: Preview the animation

Watch a live preview of your animation on a sample element. Adjust the speed and play it in reverse to fine-tune the timing and effect.

## Step 5: Copy the CSS code

Copy the generated @keyframes rule and animation property. Paste them into your stylesheet and apply the animation class to any element.

CSS animations bring interfaces to life — loading spinners, entrance effects, hover feedback, and attention-grabbing highlights all rely on them. But writing `@keyframes` rules and dialing in timing functions by hand means a lot of trial and error. The [CSS animation generator](/tools/css-animation-generator) gives you a visual timeline so you can design animations by seeing them rather than guessing at percentages.

## Animation vs transition

CSS offers two mechanisms for motion, and choosing the right one matters. **Transitions** animate between two states when a property changes (like on hover). They are simple, implicit, and require a trigger. **Animations** use `@keyframes` to define an explicit sequence of states and can run automatically, loop infinitely, and move through multiple intermediate steps. Use a transition when you have a simple A-to-B state change. Use an animation when you need multi-step sequences, auto-playing effects, or looping motion.

## Understanding keyframes and performance

A `@keyframes` rule defines named waypoints at percentage positions along the animation timeline. At `0%` (or `from`) you set the starting state, at `100%` (or `to`) the ending state, and you can add as many intermediate points as you need. The browser interpolates between these points using the easing function you specify.

Performance is the hidden cost of CSS animations. Animating `transform` and `opacity` is hardware-accelerated on most browsers because these properties can be composited on the GPU without triggering layout recalculations. Animating `width`, `height`, `margin`, `padding`, or `top`/`left` forces the browser to recalculate layout on every frame, which can cause visible jank — especially on mobile devices.

The `will-change` property hints to the browser that an element is about to animate, allowing it to promote the element to its own compositing layer ahead of time. Use it sparingly: `will-change: transform` on the element you are about to animate is helpful, but applying it to dozens of elements wastes memory.

## Tips and best practices

- **Stick to `transform` and `opacity` for smooth 60fps animation.** Move elements with `translateX()` / `translateY()` instead of changing `left` / `top`. Scale with `scale()` instead of changing `width` / `height`.
- **Use `cubic-bezier()` for custom easing.** The built-in keywords (`ease`, `ease-in-out`) cover common cases, but a custom cubic-bezier curve lets you create bouncy, elastic, or snappy motion that feels more intentional.
- **Respect `prefers-reduced-motion`.** Wrap your animations in a `@media (prefers-reduced-motion: no-preference)` query so users who are sensitive to motion can opt out. This is both an accessibility requirement and a best practice.
- **Keep animations short.** Most UI animations should be 200-500ms. Anything longer feels sluggish; anything shorter feels invisible. Loading and attention animations can loop but should still use quick individual cycles.

## Common issues

- **Animation looks choppy on mobile.** You are likely animating a layout property. Check the browser's performance profiler for layout thrashing and switch to `transform`-based movement.
- **Animation only plays once.** The default `animation-iteration-count` is `1`. Set it to `infinite` for looping animations, or to a specific number for repeated but finite effects.
- **Element snaps back to original state after animation ends.** By default, the element reverts to its pre-animation styles when the animation completes. Add `animation-fill-mode: forwards` to keep the element in its final keyframe state.