CSS Keyframe Generator
@keyframes slideUp {
from { transform: translateY(28px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}The CSS keyframe generator outputs the @keyframes block on its own, for when the animation property is already written and only the frames are missing. Six presets are covered, and the preview applies the current timing settings so you can judge the shape of the motion before copying.
How it works
A keyframes block describes what changes and when, as percentages of one cycle. It says nothing about how long the cycle takes or how many times it runs. That belongs to the animation property on the element.
- from and to are aliases for 0% and 100%. Use whichever reads better; the browser treats them identically.
- Several selectors can share one block, as in 0%, 100% { ... }, which avoids repeating a declaration.
- A property absent from a keyframe is interpolated from the surrounding frames that do declare it.
- Keyframe names are global to the document, so two blocks with the same name collide and the later one wins.
Examples
A two-frame fade
Animation
fadeIn
Result
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Two frames are enough for any simple A-to-B transition. The timing function on the animation property decides how the values are interpolated between them.
A three-point shake
Animation
shake
Result
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}0% and 100% share a declaration so the element starts and ends in place. The 50% mark is deliberately omitted, so the element passes through centre on its way between the two extremes.
Frequently asked questions
What is the difference between from/to and 0%/100%?
Nothing functionally. They are aliases. Use from and to for two-frame animations where the words read more clearly, and percentages once you have three or more frames and need the precision.
Why do my keyframes work in one component and not another?
Keyframe names are global to the document rather than scoped to a component or stylesheet. Two blocks with the same name collide and the one defined later wins, which is why generic names like fade and spin cause trouble in large codebases. Prefix them.
What happens to a property that only appears in some keyframes?
The browser interpolates it between the frames that do declare it and holds it constant outside that range. That lets you animate opacity across the whole cycle while changing transform only in the middle.
Why does this tool exist separately from the animation generator?
Because the two answer different questions. This one is for when the animation property already exists and only the frames are missing, pasting a full animation shorthand over working code is the more disruptive edit.