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.
Runs in your browser
Nothing uploaded
Free, no signup
Ctrl + Enter to run · Recent brings back your last inputs · Everything stays in this browser
CSS Animation Generator: questions
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.
Related tools
All 112 free tools
CSS Minifier & BeautifierCompress or format CSS
SVG OptimizerMinify and clean SVG markup
Website Accessibility AuditCrawl a page for WCAG risks
CSS Grid GeneratorVisual grid layout builder
CSS Flexbox GeneratorBuild flexbox layouts visually with live preview
SVG to CSS Data URI EncoderSVG as background-image
Made something with AI? Share it as a private link.
Drop in the HTML from Claude, ChatGPT or any editor and get a link your client can open anywhere — with a password, view tracking, comments and approval.