CSS Keyframes Generator
Create custom @keyframes step-by-step with opacity and transform controls.
About this tool
Create custom @keyframes step-by-step with opacity and transform controls. Experiment with motion, layout, and color in real time — then copy values into your stylesheet.
Name the animation and add keyframe steps (from/to or percent stops). Adjust opacity and transform controls per step. Example — Slide up entrance: try `0%: opacity 0, translateY(8px) → 100%: opacity 1, translateY(0)` and expect something like `@keyframes slideUp { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }`.
Step editor focuses on opacity/transform — arbitrary property pairs may need manual CSS. See also: CSS Animation Builder, and CSS Transition Builder. Runs in your browser — nothing you paste gets uploaded.
How to use
- Name the animation and add keyframe steps (from/to or percent stops).
- Adjust opacity and transform controls per step.
- Preview the sequence, then export the @keyframes block.
- Attach it with animation: name duration timing iteration on your target class.
Example
Slide up entrance
Input
0%: opacity 0, translateY(8px) → 100%: opacity 1, translateY(0)
Output
@keyframes slideUp {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}Limitations
- Step editor focuses on opacity/transform — arbitrary property pairs may need manual CSS.
- Does not generate JS-driven scroll or intersection triggers.
- Offset paths and 3D camera moves are outside the simple step model.
Related guides
1Related tools
2Frequently asked questions
What does the CSS Keyframes Generator do?
Create custom @keyframes step-by-step with opacity and transform controls. Runs in your browser — no install, no account.
How do I use the CSS Keyframes Generator?
Name the animation and add keyframe steps (from/to or percent stops). Adjust opacity and transform controls per step. Preview the sequence, then export the @keyframes block. Attach it with animation: name duration timing iteration on your target class.
Is the CSS Keyframes Generator free?
Yes. No signup, no usage limits, no paywall.
Does the CSS Keyframes Generator upload my data?
No. Processing happens locally in JavaScript. Your input is not uploaded, stored, or logged.
What are the limitations of the CSS Keyframes Generator?
Step editor focuses on opacity/transform — arbitrary property pairs may need manual CSS. Does not generate JS-driven scroll or intersection triggers. Offset paths and 3D camera moves are outside the simple step model.