CSS Animation Builder
Build CSS keyframe animations with live preview
Enable JavaScript to use the interactive tool.
How to use this tool · examples & limitations
Build CSS keyframe animations with live preview.
Getting a reliable result
Adjust one style property at a time, inspect the preview and copy the CSS into a test element.
Limitations to check
Verify the result on small screens and with keyboard navigation. A visual preview alone is not an accessibility audit.
For network services, accounts and optional usage records, see our privacy policy.