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.
39 free examples, most liked first. Click one to preview it and copy the code.
Orbit Dots Loader
by @admin · Css Animation
Aurora Mesh Banner
by @admin · Css Animation
Neon Sign Flicker
by @admin · Css Animation
Rotating Word Ticker
by @admin · Css Animation
Morphing Blob Shape
by @admin · Css Animation
Box-Shadow Pixel Heart
by @admin · Css Animation
Scroll-Driven Reveal Sweep
by @admin · Css Animation
Liquid Fill Text
by @admin · Css Animation
Circular Text Badge
by @admin · Css Animation
Spinning Cube Loader
by @admin · Css Animation
Hexagon Outline Pulse
by @admin · Css Animation
Animated Gradient Text
by @admin · Css Animation
Floating Particles Drift
by @admin · Css Animation
Difference Blend Text
by @admin · Css Animation
Falling Rain Streaks
by @admin · Css Animation
Infinite Marquee Strip
by @admin · Css Animation
Orbiting Planets
by @admin · Css Animation
Scroll Progress Indicator
by @admin · Css Animation
Pulse Ring Notification
by @admin · Css Animation
Confetti Burst
by @admin · Css Animation
Gold Text Shimmer
by @admin · Css Animation
Rotating Starburst
by @admin · Css Animation
Elastic Bounce Ball
by @admin · Css Animation
Wave Text Bounce
by @admin · Css Animation
Glitch Text Effect
by @admin · Css Animation
Animated Number Counter
by @admin · Css Animation
Semicircle Speedometer Gauge
by @admin · Css Animation
Typewriter With steps()
by @admin · Css Animation
Sound Wave Visualiser
by @admin · Css Animation
Rotating Gradient Orb
by @admin · Css Animation
Heartbeat Pulse Line
by @admin · Css Animation
Fading Quote Rotator
by @admin · Carousel
Honeycomb Cluster
by @admin · Css Animation
Water Drop Ripples
by @admin · Css Animation
Dotted Rotating Border
by @admin · Border
Firefly Glow Field
by @admin · Css Animation
Sine Ribbon Banner
by @admin · Css Animation
Battery Charging Loader
by @admin · Css Animation
Hourglass Loader
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.