CSS Animation Keyframes Builder
Create simple CSS keyframes and preview the animation in your browser.
Build CSS keyframes visually
Writing @keyframes by hand means juggling percentages and properties in your head. This builder lets you define animation steps and previews the result live, so you can see the motion instead of imagining it from a block of CSS.
Watching the animation play as you tweak the steps makes it far easier to get timing and easing right. When it looks the way you want, copy the @keyframes rule and the animation shorthand into your stylesheet.
Copy-ready keyframes
The generated @keyframes and animation shorthand drop straight into your stylesheet with nothing to install. It is built in your browser and never uploaded.
Frequently asked questions
What do the from and to fields accept?
Any CSS declarations, separated by semicolons, such as "opacity:0; transform:translateY(16px);". They become the from and to blocks of an @keyframes rule with the name you enter.
Why does the animation play back and forth?
The generated shorthand uses "infinite alternate" so the preview loops smoothly. For a one-time entrance animation, change it to "1 forwards" so it plays once and keeps its end state.
Which properties are safe to animate?
transform and opacity are handled by the compositor and stay smooth. Animating width, height, top, or margin forces layout on every frame and can stutter on slower devices.
Related tools
Practical utilities for front-end design and implementation work.