Pure CSS Animations
CSS animations move and transform elements with @keyframes and transitions, with no animation library. These examples cover fades, bounces, rotations, waves and full scenes.
82 free examples, most liked first. Click one to preview it and copy the code.
Birthday Cake Candle
by @admin · Css Animation
Gradient Hover Effect
by @admin · Css Animation
Flame Animation
by @admin · Css Animation
Candle Flame Animation
by @admin · Css Animation
Cool 3D Hover Effect
by @admin · Css Animation
Animated Weather Icons
by @admin · Css Animation
Flip-Disc Checkbox
by @admin · Buttons
Neon Toggle Switch
by @admin · Buttons
Bubble Effect
by @admin · Css Animation
Pixel Heart
by @admin · Css Animation
Staggered Bars Reveal Animation
by @admin · Css Animation
Border Animation
by @admin · Border
Battery Charging Progress
by @admin · Css Animation
Water Drop
by @admin · Css Animation
3D Text Spiral Animation
by @admin · Css Animation
Drip Drop
by @admin · Css Animation
Cogs Animation
by @admin · Css Animation
Text reveal animation
by @admin · Css Animation
Flickering Animation
by @admin · Css Animation
Tea Brewing
by @admin · Css Animation
Circle Animation Loader
by @admin · Css Animation
Typing animation
by @admin · Css Animation
Text reveal animation v2
by @admin · Css Animation
Bouncing ball
by @admin · Css Animation
Bouncing text
by @admin · Css Animation
Line Loading Animation
by @admin · Css Animation
Download Animation
by @admin · Css Animation
Wavy text animation
by @admin · Css Animation
Rainbow Box
by @admin · Css Animation
Fluid Animation
by @admin · Css Animation
Shine Gradient Buttons
by @admin · Buttons
Growing Flower Plant Animation
by @admin · Css Animation
Animated Button
by @admin · Buttons
CSS Bouncing Ball
by @admin · Css Animation
Glowing Loader Ring Animation
by @admin · Css Animation
Fire Animation
by @admin · Css Animation
Geometric Animation
by @admin · Css Animation
Text Animation
by @admin · Css Animation
Countdown Timer
by @admin · Css Animation
Single Element Absolute Center Overlay Spinner
by @admin · Css Animation
Text sliding animation
by @admin · Css Animation
Bouncing
by @admin · Css Animation
Falling leaves
by @admin · Css Animation
Battery Charging
by @admin · Css Animation
Mouse Scroll Down Animation
by @admin · Css Animation
Pencil animation
by @admin · Css Animation
Ringing call pluse animation
by @admin · Css Animation
Bouncing ball v2
by @admin · Css Animation
Rainbow Background
by @admin · Css Animation
J.A.R.V.I.S Animation
by @admin · Css Animation
Bouncing ball v3
by @admin · Css Animation
Typewriter Effect -Single Word Animation
by @admin · Css Animation
Pulsating heart
by @admin · Css Animation
Box border animation
by @admin · Border
3d box-ball animation
by @admin · Css Animation
Heart animation
by @admin · Css Animation
Simple Slide Animation
by @admin · Css Animation
Perpetual Animation
by @admin · Css Animation
Ferris Wheel Animation
by @admin · Css Animation
Line Animation
by @admin · Css Animation
Animations FAQ
Can I animate with CSS only?
Yes. The @keyframes rule and the transition property animate position, size, color and opacity without JavaScript. Each example here is built that way.
How do I use these pure CSS animations?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.