Generate CSS keyframe animations with live preview. 16 presets, scroll trigger support, full timing control — copy the complete CSS + JS.
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 including fade, slide, bounce, zoom, rotate, pulse, shake, flip, heartbeat, and swing — then customize the duration, delay, timing function, iteration count, direction, and fill mode.
Choose between Normal mode (plays on page load) or Scroll Trigger mode, which generates a complete Intersection Observer setup so the animation fires when the element enters the viewport — no external library required.
All 16 presets are handcrafted for smooth, natural motion. Copy the complete CSS + optional JS scroll trigger with one click.
Each preset maps to a clean @keyframes block stored with the body separated from the wrapper. The animation shorthand is built from your selected parameters. In Scroll Trigger mode, an Intersection Observer adds an is-visible class when the element enters the viewport, which triggers the animation via CSS class.
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.