A named animation with two keyframe states
A 'spin' animation over 1 second, rotating from 0deg to 360deg, generates: @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } paired with .el { animation: spin 1s linear infinite; }.
linear timing is deliberate here, not incidental -- a continuous rotation looks smooth and consistent only with a constant speed; an ease-in-out timing function (common for other animations) would make a spinning element visibly speed up and slow down each rotation, which usually looks wrong for a loading-spinner-style continuous spin.
infinite repeats the animation indefinitely, which is appropriate for an ongoing effect like a loading spinner -- for an animation meant to play once (like an entrance effect), infinite would need to be replaced with a specific iteration count or removed entirely.
What a two-keyframe rotation demo doesn't cover
Rotate-only demo. Scale, opacity, and multi-stop timelines are not generated. Real animations frequently combine multiple transform properties (scale, translate, and rotate together) or animate other properties like opacity alongside transform -- this generator produces a simple two-point rotation only, as a clear, minimal example of the @keyframes syntax.
This uses only two keyframe stops (from and to, equivalent to 0% and 100%) -- more complex animations commonly use several percentage-based stops (0%, 25%, 50%, 75%, 100%) to create a multi-stage timeline with different values at each stage, which this simple generator doesn't produce.
The animation shorthand here (animation: spin 1s linear infinite;) omits several other available sub-properties (animation-delay, animation-direction, animation-fill-mode) that control when the animation starts, whether it plays in reverse on alternate iterations, and what styles apply before/after it runs.
Building more elaborate animations from this starting point
For an animation that also fades or scales elements in, rather than just rotating, this two-keyframe pattern can be extended manually with additional properties inside the same from/to (or percentage-based) blocks.
For animating an SVG line-drawing effect specifically (a different animation technique using stroke-dasharray rather than transform), the SVG Stroke-Dasharray Line-Draw Animation Generator covers that specific effect.
For a celebratory confetti-style animation rather than a simple rotation, the CSS Confetti Animation Generator is a related, more elaborate keyframe pattern.
Frequently Asked Questions (FAQ)
Why is linear timing used instead of ease-in-out?
linear keeps rotation speed constant throughout each cycle, which looks smooth and continuous. An ease-in-out timing function would cause the rotation to visibly speed up and slow down within each cycle, which usually looks wrong for a continuous spin effect like a loading indicator.
What does infinite do in the animation shorthand?
It repeats the animation indefinitely rather than playing it once. For an animation meant to run only once (like a page-load entrance effect), infinite would need to be replaced with a specific number or omitted, since the default iteration count is 1.
Can this generate animations with more than two keyframe stops?
No. Rotate-only demo. Scale, opacity, and multi-stop timelines are not generated. It produces a simple from/to (0% to 100%) rotation. More elaborate multi-stage animations with several percentage-based stops need to be written manually using this generated pattern as a starting structure.
Does this animate properties other than rotation, like opacity or scale?
No. Rotate-only demo. Scale, opacity, and multi-stop timelines are not generated. This is a focused rotation-only example. Combining rotation with scale, translate, or opacity changes within the same keyframes requires adding those properties manually to the generated from/to blocks.
What other animation sub-properties aren't included in this shorthand?
animation-delay (when the animation starts), animation-direction (whether it reverses on alternate cycles), and animation-fill-mode (what styles apply before or after the animation plays) are all available CSS properties not included in this simple generated shorthand.
