Generate CSS keyframe animations with live preview. 16 presets, scroll trigger support, full timing control — copy the complete CSS + JS.
CSS Animation Generator
Processing…
FREE
Loading…
Controls
Animation Type
Timing
Iteration
Direction
Fill Mode
Trigger
Preview
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease 0s 1 normal forwards;
}CSS Animation Generator is a free online tool for creating CSS @keyframe animations with a live preview. Select from 16 animation presets — fade in/out, slide in from all four directions, bounce, zoom in/out, rotate, pulse, shake, flip, heartbeat, and swing — then fine-tune duration, delay, timing function, iteration count, direction, and fill mode with sliders and dropdowns that update the preview instantly.
A CSS @keyframes rule defines a sequence of styles at points along an animation's timeline, expressed either as from/to (equivalent to 0% and 100%) for simple two-state transitions, or as explicit percentages (0%, 50%, 70%, 100%) for anything with intermediate states — which is exactly why bounceIn needs four keyframe stops to get its overshoot-and-settle motion right, while a plain fadeIn only needs two. Writing these by hand means tracking percentage math and remembering which transform functions compose correctly; this tool handles that and lets you focus on the timing.
The five settings you control — duration, delay, timing-function, iteration-count, and direction — combine into the single animation shorthand property applied to an element. Timing functions matter more than they might seem: linear produces mechanical, constant-speed motion appropriate for spinners, while ease-out (or a custom cubic-bezier for a bounce/overshoot feel) reads as far more natural for anything meant to draw attention, like an entrance or a button press. fill-mode is the setting most people get wrong when hand-writing keyframes — without fill-mode: forwards, the browser snaps an element back to its pre-animation styles the instant the animation finishes, which looks like a bug on any fade-in or slide-in effect.
Scroll Trigger mode solves a different problem: playing an animation only once an element scrolls into view, rather than immediately on page load. Rather than wiring up a scroll event listener (which fires dozens of times per second and needs manual throttling to avoid janking the page), this mode generates a complete IntersectionObserver setup — the same modern browser API used by lazy-loading images and infinite-scroll implementations — that fires exactly once per element crossing your chosen viewport threshold, with zero external dependency on a library like AOS or ScrollReveal.
Every preset here animates only transform and opacity, deliberately. Those two properties are the only ones a browser can animate purely on the GPU compositor thread without triggering a full layout recalculation, which is why they stay smooth even on lower-powered devices — animating width, height, or top/left instead would visibly stutter under the same conditions. Everything runs and renders in your browser; no animation data or generated code is ever sent to a server.
Each preset is stored as a keyframe body (the percentage or from/to blocks) separate from its @keyframes wrapper name, so switching presets just swaps that body into a freshly generated block. Your five timing controls — duration, delay, timing-function, iteration-count, and direction, plus fill-mode — are concatenated into a single animation shorthand string and applied to a live preview element, with a unique keyframe name generated on every Replay click so the browser is forced to restart the animation rather than ignore a repeated declaration. In Scroll Trigger mode, the tool additionally outputs a CSS rule pairing your element's hidden initial state with an .is-visible variant that carries the actual animation, plus a ready-to-paste IntersectionObserver script that adds the is-visible class the moment the element crosses your chosen viewport threshold — no scroll event listeners, no throttling logic, and no animation library required.
Choose animation type
Pick from 16 presets — fade, slide, bounce, zoom, rotate, pulse, shake, flip, heartbeat, and swing.
Set trigger mode
Choose Normal (plays immediately) or Scroll Trigger (plays when element enters viewport).
Adjust timing
Set duration, delay, easing, and iteration count using the controls.
Replay preview
Click Replay to re-run the animation in the live preview at any time.
Copy code
Switch between CSS and JS tabs and copy the complete code for your project.
Entrance Animations
Add fade-in or slide-in effects to sections as they enter the viewport using scroll trigger mode.
Notification Pulses
Use the pulse or heartbeat animation to draw attention to badges, alerts, or CTAs.
Loading Spinners
Use the rotate animation with infinite iteration to create smooth CSS loading indicators.
Error Shakes
Apply the shake animation to form fields when validation fails for tactile feedback.
Scroll Card Reveals
Animate product cards and testimonials with bounceIn or zoomIn on scroll automatically.
Button Feedback
Add a subtle pulse or scale animation to CTAs to increase click-through rates.
16 Handcrafted Presets
Every animation is carefully tuned for natural, smooth motion across different use cases.
Scroll Trigger Built-In
Generates complete Intersection Observer JS — no GSAP or ScrollReveal dependency needed.
Working Live Preview
The preview runs the actual CSS animation and Replay fires it again on demand.
Complete Code Output
@keyframes block and the animation property are both included — paste and done.
No External Libraries
Generated CSS and JS use only native browser APIs — zero dependencies.
All Parameters Exposed
Duration, delay, timing, iteration, direction, and fill-mode are all configurable.
Also Try
Also Known As
Binary To Decimal
Convert between binary, decimal, hex and octal number systems
Color Converter
Convert colors between HEX, RGB, and HSL formats
Convert Binary
Convert binary numbers to text and text to binary
Convert Timestamp
Convert Unix epoch timestamp to standard date format and back
Count Words
Count words, characters, sentences and paragraphs in text
Convert Datetime
Convert datetime between different formats and timezones
Trusted Worldwide
iLoveDocsTools is used by students, professionals, and businesses across the United States, Canada, United Kingdom, Australia, India, and more than 100 other countries. All tools are browser-based and process files privately — your files never leave your device. Free to use, with Pro plans for unlimited access.
All processing happens directly in your browser. Your documents are never sent to any server — complete privacy guaranteed for users in the USA, Canada, UK, and worldwide.
Every tool on iLoveDocsTools is free to use. Need more? Upgrade to Pro for unlimited usage, priority access, and no daily limits. Trusted by students, freelancers, and teams across North America and Europe.
Whether you are on a Mac, Windows PC, iPhone, or Android in New York, Toronto, London, or Sydney — our tools work instantly in any modern browser.
Looking for free PDF tools in the USA? Free document converters in Canada? Online PDF editors in the UK or Australia? iLoveDocsTools offers 70+ free tools — merge PDF, split PDF, compress PDF, convert Word to PDF, Excel to PDF, JPG to PDF, and many more — all free, all instant, all private. No watermarks. No file size limits. Just free tools that work.