Keyframe Animation CSS Generator
Our CSS Animation Generator is a lightweight and interactive playground that helps designers and developers explore, preview, and copy pure CSS animations. It comes with a large library of pre-built @keyframes (100+ variations) organized into accordion categories for easy navigation.
CSS Animations List
- Bounce Out Bottom
- Bounce Out Left
- Bounce Out Right
- Bounce Out Top
- Bounce Out Backward
- Bounce Out Forward
- Fade Out Backward
- Fade Out Forward
- Fade Out Bottom
- Fade Out Center
- Fade Out Left
- Fade Out Right
- Fade Out Top
- Roll Out Bottom
- Roll Out Left
- Roll Out Right
- Roll Out Top
- Scale Out Bottom
- Scale Out Center
- Scale Out Left
- Scale Out Right
- Scale Out Top
- Scale Out Horizontal-Center
- Scale Out Horizontal-Left
- Scale Out Horizontal-Right
- Scale Out Vertical-Bottom
- Scale Out Vertical-Center
- Scale Out Vertical-Top
- Swirl Out Forward Bottom
- Swirl Out Forward Center
- Swirl Out Forward Left
- Swirl Out Forward Right
- Swirl Out Forward Top
- Swirl Out Backward Bottom
- Swirl Out Backward Center
- Swirl Out Backward Left
- Swirl Out Backward Right
- Swirl Out Backward Top
- Slide Out Bottom
- Slide Out Left
- Slide Out Right
- Slide Out Top
- Swing Out Forward Bottom
- Swing Out Forward Left
- Swing Out Forward Right
- Swing Out Forward Top
- Swing Out Backward Bottom
- Swing Out Backward Left
- Swing Out Backward Right
- Swing Out Backward Top
- Bounce In Bottom
- Bounce In Left
- Bounce In Right
- Bounce In Top
- Bounce In Backward
- Bounce In Forward
- Roll In Bottom
- Roll In Left
- Roll In Right
- Roll In Top
- Fade In Backward
- Fade In Forward
- Fade In Bottom
- Fade In Center
- Fade In Left
- Fade In Right
- Fade In Top
- Scale In Forward Bottom
- Scale In Forward Center
- Scale In Forward Left
- Scale In Forward Right
- Scale In Forward Top
- Scale In Forward Horizontal-Center
- Scale In Forward Horizontal-Left
- Scale In Forward Horizontal-Right
- Scale In Forward Vertical-Bottom
- Scale In Forward Vertical-Center
- Scale In Forward Vertical-Top
- Scale In Backward Bottom
- Scale In Backward Center
- Scale In Backward Left
- Scale In Backward Right
- Scale In Backward Top
- Scale In Backward Horizontal-Center
- Scale In Backward Horizontal-Left
- Scale In Backward Horizontal-Right
- Scale In Backward Vertical-Bottom
- Scale In Backward Vertical-Center
- Scale In Backward Vertical-Top
- Swirl In Forward Bottom
- Swirl In Forward Center
- Swirl In Forward Left
- Swirl In Forward Right
- Swirl In Forward Top
- Swirl In Backward Bottom
- Swirl In Backward Center
- Swirl In Backward Left
- Swirl In Backward Right
- Swirl In Backward Top
- Slide In Bottom
- Slide In Left
- Slide In Right
- Slide In Top
- Swing In Forward Bottom
- Swing In Forward Left
- Swing In Forward Right
- Swing In Forward Top
- Swing In Backward Bottom
- Swing In Backward Left
- Swing In Backward Right
- Swing In Backward Top
- Box Shadow Bottom
- Box Shadow Bottom-Left
- Box Shadow Bottom-Right
- Box Shadow Center
- Box Shadow Left
- Box Shadow Left-Right
- Box Shadow Right
- Box Shadow Top
- Box Shadow Top-Bottom
- Box Shadow Top-Left
- Box Shadow Top-Right
- Box Shadow Scale Bottom
- Box Shadow Scale Bottom-Left
- Box Shadow Scale Bottom-Right
- Box Shadow Scale Center
- Box Shadow Scale Left
- Box Shadow Scale Left-Right
- Box Shadow Scale Right
- Box Shadow Scale Top
- Box Shadow Scale Top-Bottom
- Box Shadow Scale Top-Left
- Box Shadow Scale Top-Right
- Rotate Bottom
- Rotate Center
- Rotate Left
- Rotate Right
- Rotate Top
- Scale Up Bottom
- Scale Up Center
- Scale Up Left
- Scale Up Right
- Scale Up Top
- Scale Up Horizontal-Center
- Scale Up Horizontal-Left
- Scale Up Horizontal-Right
- Scale Up Vertical-Bottom
- Scale Up Vertical-Center
- Scale Up Vertical-Top
- Scale Down Bottom
- Scale Down Center
- Scale Down Left
- Scale Down Right
- Scale Down Top
- Scale Down Horizontal-Center
- Scale Down Horizontal-Left
- Scale Down Horizontal-Right
- Scale Down Vertical-Bottom
- Scale Down Vertical-Center
- Scale Down Vertical-Top
- Slide Bottom
- Slide Left
- Slide Right
- Slide Top
- Blink 1
- Blink 2
- Bounce Bottom
- Bounce Left
- Bounce Right
- Bounce Top
- Jello Horizontal
- Jello Vertical
- Pulse Heartbeat
- Pulse Regular
- Pulse Ping
- Shake Horizontal
- Shake Vertical
- Shake Rotate
- Shake Bottom
- Shake Left
- Shake Right
- Shake Top
- Vibrate 1
- Vibrate 2
- Vibrate 3
- Wobble Bottom
- Wobble Left
- Wobble Right
- Wobble Top
.selector{animation: bounce-out-bottom 2s ease 0s 1 normal forwards}
Click an animation to see CSS
CSS Keyframe Animation Collection
The CSS Keyframe Animation Collection is a free library of professionally designed CSS animations that you can preview, customize, and copy in seconds. Browse hundreds of ready-made @keyframes animations organized into categories, making it easy to find the perfect animation for buttons, text, images, cards, icons, loaders, and other UI elements.
What is the CSS Keyframe Animation Collection?
Instead of creating animations from scratch, this collection provides a large selection of pre-built CSS keyframe animations that are ready to use. Every animation includes a live preview and the complete CSS code, allowing developers and designers to quickly copy and integrate effects into websites, web applications, landing pages, portfolios, and user interfaces.
What’s Included?
- 100+ ready-made CSS keyframe animations.
- Animations grouped into organized categories.
- Live animation preview before copying.
- Clean CSS code for every animation.
- Copy code with a single click.
- Works with HTML, CSS, JavaScript, React, Vue, Angular, and WordPress.
- No downloads or registration required.
- Compatible with all modern browsers.
Animation Categories
The collection includes a wide variety of animation styles such as Bounce, Fade, Slide, Zoom, Rotate, Flip, Swing, Pulse, Shake, Roll, Scale, Blur, Entrance, Exit, Attention Seekers, Text Animations, and many more. New animations can easily be added to expand the library over time.
How to Use the Animation Collection
- Browse the animation categories.
- Select an animation from the list.
- Preview the animation instantly.
- Copy the generated CSS code.
- Paste the code into your project.
- Apply the animation class to your HTML element.
Why Use This Collection?
Writing CSS animations manually takes time. This animation collection lets you quickly discover high-quality animation effects without searching multiple websites. Whether you’re building landing pages, dashboards, portfolios, admin panels, or interactive web applications, you can add smooth animations in just a few clicks.
Browser Compatibility
All animations use standard CSS @keyframes and work in modern browsers including Chrome, Firefox, Edge, Safari, and Opera. They can be used with plain HTML/CSS or popular frameworks like Bootstrap, Tailwind CSS, React, Vue, Angular, Next.js, and WordPress.
Related CSS Tools
- CSS Gradient Generator
- CSS Box Shadow Generator
- CSS Transform Generator
- CSS Glass Morphism Generator
- CSS Border Image Generator
Learn More About CSS Animations
To better understand how CSS animations work, read the official documentation for the @keyframes rule and the CSS Animation specification. Learning the basics will help you customize timing, easing, iteration count, delays, and animation direction to create even more engaging user experiences.
Explore our free CSS Keyframe Animation Collection to discover beautiful animation effects, preview them instantly, and copy production-ready CSS for your next frontend project.
Why Use @keyframes Animations?
-
Multi-step animations: Unlike CSS transitions that only animate
between two states,
@keyframesallows you to define multiple stages (0%, 50%, 100%, etc.), making effects like bouncing, shaking, or pulsing possible. -
Automatic looping: With
animation-iteration-count: infinite;, animations can run endlessly without JavaScript. -
Playback options: Control playback with
normal,reverse, oralternatedirections, and setforwardsorbothfill modes to control end states. - Performance friendly: Keyframe animations are GPU-optimized and run smoothly, even on mobile devices, without heavy JavaScript.
- Reusable & composable: Define an animation once and reuse it across multiple elements, or even combine several animations together.
- Cleaner code: Keeps animation logic in CSS, making it easier for designers and developers to work together without extra JS complexity.
CSS Animation Shorthand Syntax
The CSS animation property is a shorthand that lets you define all animation options in one line.
General form:
Parameters Explained:
- animation-name → the name of the
@keyframesyou want to use (e.g.,fadeIn). - animation-duration → how long the animation runs (e.g.,
2s,500ms). - animation-timing-function → the speed curve or easing (e.g.,
ease,linear,ease-in-out). - animation-delay → how long to wait before starting (e.g.,
0s,1s). - animation-iteration-count → how many times it runs (e.g.,
1,infinite). - animation-direction → the playback direction (e.g.,
normal,reverse,alternate). - animation-fill-mode → defines how the element styles are applied before and after animation (e.g.,
forwards,backwards,both).