CSS Keyframes Generator

About this tool

CSS animations defined by @keyframes let you bring interfaces to life with fades, slides and rotations that play without any JavaScript. Writing the keyframe block and the animation shorthand from scratch is tedious when you just want a working starting point. The CSS Keyframes Generator builds a two-stop animation: a from and a to stop, each with a transform value and an opacity. Pick a preset — Fade, Slide Up, Slide Left or Rotate In — or type your own transforms, then set the animation name, duration (rounded to 0.1s), easing keyword (ease, linear, ease-in, ease-out, ease-in-out) and an iteration count or Infinite. The output pairs the @keyframes block with an .anim rule carrying the animation shorthand, ready to paste. There is no on-page motion preview, so test the copied CSS in your project. Note that a To opacity of 0 is currently written as 1, so fade-outs need a manual edit after copying.

Why use it

• From/To Builder: Each animation has a from and a to stop with a transform and an opacity — enough for fades, slides, rotations and scale-ins without writing the boilerplate by hand.

• Starter Presets: Fade, Slide Up, Slide Left and Rotate In fill the from/to fields with tested values that you can then tweak.

• Easing Keywords: Choose ease, linear, ease-in, ease-out or ease-in-out from a dropdown and the value goes straight into the animation shorthand.

• Free-Form Transforms: The transform fields accept any CSS transform list, so you can combine functions such as translateY(24px) scale(0.95) in a single stop.

• Copy Block: The output includes the named @keyframes block and an .anim rule with the animation shorthand together. Forgetting to add the animation declaration after writing keyframes is a common mistake; this generator outputs both so the element animates immediately after pasting.

How to use

1. Type an Animation name (spaces become hyphens)
2. Pick a Preset — Fade, Slide Up, Slide Left or Rotate In — or keep Custom
3. Edit the From/To transform fields (any transform value, e.g. translateY(24px)) and From/To opacity (0–1)
4. Set Duration in seconds and choose an Easing: ease, linear, ease-in, ease-out or ease-in-out
5. Set an Iteration count or tick Infinite
6. Click Copy CSS to grab the @keyframes block and the .anim animation rule together

When it helps

• When adding an entrance animation to a card, toast notification, or modal that should slide and fade in
• When adding a continuous spin to an icon with rotate(0deg) to rotate(360deg), linear easing and Infinite
• When prototyping a slide-in for a dropdown or side panel before tuning it in your codebase
• When teaching how @keyframes from/to stops pair with the animation shorthand
• When generating a named starter animation to extend with extra percentage stops by hand
• When implementing a scroll-triggered reveal animation and need to define the from and to states

Examples

Name fadeInUp, Duration 0.5, Easing ease-out, Iteration 1, From translateY(20px) / opacity 0, To translateY(0) / opacity 1

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

.anim {
  animation: fadeInUp 0.5s ease-out 1;
}

Name spin, Duration 1, Easing linear, Infinite, From rotate(0deg) / opacity 1, To rotate(360deg) / opacity 1

@keyframes spin {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }
  to {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.anim {
  animation: spin 1.0s linear infinite;
}

Name rotateIn, Preset Rotate In, Duration 0.8, Easing ease, Iteration 1

@keyframes rotateIn {
  from {
    transform: rotate(-12deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}

.anim {
  animation: rotateIn 0.8s ease 1;
}

Tips

• Animate transform and opacity exclusively where possible — they are composited on the GPU and produce consistently smooth 60fps motion without triggering layout
• Set animation-fill-mode: forwards on entrance animations so the element stays visible after the animation completes instead of snapping back to its initial invisible state
• Wrap all non-essential animations in @media (prefers-reduced-motion: no-preference) to respect users with vestibular disorders or motion sensitivity settings
• Negative animation-delay (e.g. -0.5s) starts the animation mid-cycle immediately, useful for staggered lists where you want items offset in phase rather than all starting from scratch
• Stack multiple opacity and transform stop values in one @keyframes block rather than creating separate overlapping animations for coordinated entrance effects

Frequently Asked Questions

Glossary

Keyframe

A percentage stop within a @keyframes rule that defines the CSS property values at that point in the animation timeline. 0% is the start; 100% is the end; intermediate stops control the path between.

Animation Timing Function

Controls how an animation progresses over its duration — whether it accelerates, decelerates, or moves at a constant rate. Applied per-keyframe or to the overall animation via the animation-timing-function property.

Cubic Bezier

A mathematical curve defined by four control points used to describe custom animation easing. css built-in easings like ease map to specific cubic-bezier() values; custom curves enable spring, bounce, and other non-standard motion profiles.

Iteration Count

The number of times an animation plays, set by animation-iteration-count. Use a number for finite repetitions or the keyword infinite for continuous looping.

Animation Delay

The time before an animation starts, set by animation-delay. Negative values skip that duration into the animation timeline, useful for staggering items in a list.

Fill Mode

Controls the element's state before or after animation play. forwards keeps the final keyframe state; backwards applies the first keyframe during delay; both applies both behaviors simultaneously.