Writing the @keyframes block and the animation line together
A keyframe animation has two halves: the @keyframes block that defines the steps, and the animation declaration that calls that name. Writing only one half raises no error at all, nothing simply happens, which is tedious to diagnose. This generator takes the steps line by line and writes both halves at once.
Your steps get checked
It verifies that percentages sit between 0 and 100, that no percentage repeats, and that each declaration has a colon, reporting the line number. The generated code is then fed to the browser, and any property whose value was dropped as invalid is named. Declaration order follows the W3C CSS Animations specification (as of October 2026).
What it does not do
It does not suggest a suitable duration. It builds the code from your values and reports the total play time in milliseconds. A plain change between two states belongs to a transition tool, and scroll-driven animations and Web Animations API code are out of scope.
Frequently Asked Questions
Most often one of the two halves is missing, or the two names differ. This generator writes the @keyframes block and the animation declaration with the same name.
It works without one, but then the animation starts from the element's current values, so writing 0% is safer when the starting look matters.
Whether the last step's values are kept after the animation ends (forwards), or the first step's values are applied before it starts (backwards).