Keyframes

Keyframes

CSS keyframes generator online. Create @keyframes animations with editable stops. CSS animation builder—free keyframe editor.

Keyframes Editor (3)

%
%
%

Generated CSS

@keyframes myAnimation {
  0% {
    background-color: #6366f1;
  }
  50% {
    transform: translate(50px, -20px) scale(1.2) rotate(180deg);
    opacity: 0.8;
    background-color: #ec4899;
  }
  100% {
    transform: rotate(360deg);
    background-color: #6366f1;
  }
}

.animated-element {
  animation: myAnimation 1000ms ease infinite normal;
}

Live Preview

0%

Global Settings

Quick Presets

Features

  • Visual timeline for animation steps
  • Add/remove keyframe stops (0%, 50%, 100%)
  • Property editor for each step
  • Preview with duration/delay/iteration controls
  • Generate complex @keyframes code
  • Preset library (fade, slide, bounce)

Common Use Cases

  • Create complex multi-step animations
  • Design loading spinners
  • Animate element entrance/exit
  • Create attention-grabbing effects (shake, pulse)
  • Build pure CSS presentations

CSS Keyframe Animations

The @keyframes rule allows you to create animations by gradually changing from one set of CSS styles to another. You specify when the change happens in percentages, or using the keywords from and to.

Syntax:

@keyframes animationName {
  0%   { background-color: red; }
  50%  { background-color: yellow; }
  100% { background-color: green; }
}

Applying the animation:

animation: name duration timing-function delay iteration-count direction fill-mode;

Examples

Valid - Fade In
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
Valid - Spin
@keyframes spin { 100% { transform: rotate(360deg); } }

Frequently Asked Questions

What is the difference between transition and animation?
Transitions move from state A to state B when a property changes (hover, class change). Animations can have intermediate steps (keyframes), loop, and start automatically without user interaction.
What does fill-mode do?
`animation-fill-mode` specifies a style for the element when the animation is not playing (before it starts, after it ends, or both). `forwards` retains the computed values set by the last keyframe.
Can I animate any property?
Most properties are animatable, but not all. Properties involving layout (height: auto) are notoriously hard to animate smoothly. Transform and Opacity are best for performance.

💡 Tips

  • Prioritize animating `transform` and `opacity` for 60fps performance.
  • Use `will-change` sparingly to hint browsers about upcoming animations.
  • Use `animation-delay` to stagger animations for a group of elements.

Related Tools

Cubic Bezier

Create custom timing functions

Try it

CSS Transitions

Simple A-to-B animations

Try it

Snippet Library

Common animation snippets

Try it