CSS Animation Generator
Create CSS animations without writing @keyframes from scratch. Choose from preset effects (fade, slide, bounce, spin, pulse, shake) or build a custom keyframe sequence. Control duration, delay, timing function, iteration count, direction, and fill mode. Preview live and copy the CSS.
Ctrl+Enter to run · Ctrl+K to switch tools · Recent button shows input history
Let AI do the hard part. Fix broken HTML, convert to email-safe HTML, or clean up any markup in one click — 3 free AI runs per day, no account needed.
Try the AI HTML FixerFAQ
What is a CSS animation?
A CSS animation uses @keyframes to define states at different points in time and the animation-* properties to control playback. Unlike transitions, animations can loop, alternate, and run on page load without a trigger.
animation-fill-mode — what does it do?
fill-mode controls the state of the element before and after the animation. "forwards" keeps the end state after the animation finishes. "backwards" applies the start state during the delay period. "both" does both.