Want to take your CSS skills to the next level? Browse through 100+ awesome animation examples from CodePen creators and learn how to add engaging motion to your web projects.
Title:- 2020 SVG Animation
Author:-@keyframers
Made with:-HTML / CSS (SCSS)
Title:- Animated Shopping Cart Icons
Author:-Joni Trythall
Made with:-HTML / CSS / JavaScript
Title:- Bits And Bytes CSS Animation
Author:-Ollie
Made with:-HTML / CSS (SCSS)
Title:- Welcome
Author:-Toshiya Marukubo
Made with:-HTML (Pug) / CSS (Stylus)
Title:- CSS Animated 3D Toaster
Author:-Jhey
Made with:-HTML (Pug) / CSS (Stylus)
Title:- Crypto Web3 Blockchain Animation
Author:-Jorge
Made with:-HTML / CSS (SCSS)
Title:- Loop Animation
Author:-Yancy Min
Made with:-HTML / CSS
Title:- Old Film Effect – Pure CSS Animation
Author:-Josetxu
Made with:-HTML / CSS
Title:- CSS Lighthouse Scene
Author:-agathaco
Made with:-HTML (Pug) / CSS (SCSS)
Title:- Flat Design Amusement Park with CSS Animation
Author:-Vladimir Gashenko
Made with:-HTML / CSS
Title:- Only CSS: Moon Clip
Author:-Yusuke Nakaya
Made with:-HTML (Pug) / CSS (SCSS)
Title:- Cloudy Spiral
Author:-Hakim El Hattab
Made with:-HTML (Haml) / CSS (SCSS)
Title:- Neumorphism Animation
Author:-masuwa
Made with:-HTML / CSS
Title:- Nosferatu – Pure CSS Animation
Author:-Josetxu
Made with:-HTML / CSS
Title:- H2O – Chemical Flask Animation
Author:-Ekaterina Vasilyeva
Made with:-HTML / CSS
Title:- Folding Panorama Animation
Author:-Bennett Feely
Made with:-HTML (Slim) / CSS (SCSS)
Title:- CSS Flame Animation
Author:-Adrian Payne
Made with:-HTML / CSS
Title:- Circles and Lines
Author:-Ivan Bogachev
Made with:-HTML / CSS (Less)
Title:- CSS only Camera Shutter
Author:-Shaw
Made with:-HTML / CSS (SCSS)
Title:- Coffee Machine Animation
Author:-Henrique Rodrigues
Made with:-HTML / CSS
Title:- Letter CSS Animation
Author:-Miguel
Made with:-HTML / CSS (Sass)
Title:- Pure CSS Blooming Flowers with Falling Leaves
Author:-Md Usman Ansari
Made with:-HTML / CSS
Title:- CSS Animation SVG Building
Author:-Luiso Martínez
Made with:-HTML / CSS
Title:- Pure CSS Magic Gateways with Houdini
Author:-Ana Tudor
Made with:-HTML (Pug) / CSS (SCSS)
Title:- Netflix Intro Animation Pure CSS
Author:-Claudio Bonfati
Made with:-HTML / CSS (Sass)
Title:- Only CSS 3D Cube
Author:-Hisami Kurita
Made with:-HTML / CSS (SCSS)
Title:- CSS Only Border Animation
Author:-Danny Joris
Made with:-HTML (Pug) / CSS (SCSS)
Title:- Perspective Grid with Animation
Author:-Brian Haferkamp
Made with:-HTML (Pug) / CSS (Sass) / JavaScript
Title:- Evening Lanterns
Author:-Braydon Coyer
Made with:-HTML (Pug) / CSS (SCSS)
Title:- CSS Mask Animation
Author:-Shaw
Made with:-HTML / CSS (SCSS)
Title:- Mood Swing
Author:-Alexander Mold
Made with:-HTML / CSS (Sass)
Title:- Only Css Animation #03
Author:-Hisami Kurita
Made with:-HTML / CSS
Title:- Animated Sticker
Author:-ycw
Made with:-HTML (Pug) / CSS (Less)
Title:- Pure CSS Sponge
Author:-Julia Muzafarova
Made with:-HTML / CSS (SCSS)
Title:- Desk CSS Animation
Author:-Luiso Martínez
Made with:-HTML / CSS
Title:- Rock Hand Animation
Author:-Vangel Tzo
Made with:-HTML / CSS (SCSS)
Title:- Loving Car – Pure CSS with Animation
Author:-Nikhil Krishnan
Made with:-HTML (Haml) / CSS (SCSS) / JS
Title:- CSS Sprite Stop Motion Animation
Author:-Chris Heuberger
Made with:-HTML / CSS (SCSS)
Title:- Signature Animation
Author:-Damian Drygiel
Made with:-HTML / CSS (Less)
Title:- CSS is Awesome
Author:-Mikael Ainalem
Made with:-HTML / CSS
Title:- Whale And The Moon
Author:-Aswin Behera
Made with:-HTML / CSS
Title:- SVG Animation
Author:-Andrej Sharapov
Made with:-HTML (Pug) / CSS (SCSS)
Title:- Product Page
Author:-Kaio Almeida
Made with:-HTML / CSS (SCSS)
Title:- AnimXYZ Example
Author:-designcourse
Made with:-HTML / CSS (SCSS)
Title:- Rock’N’Roll Half-Marathon Animation
Author:-Kyle
Made with:-HTML / CSS (SCSS)
Title:- CSS & SVG Waves Animation
Author:-Ted McDonald
Made with:-HTML / CSS (SCSS)
Title:- Day and Night: CSS Transitions and Animations Explained
Author:-Stéphanie Walter
Made with:-HTML / CSS (SCSS)
Title:- Fake Variable Font with CSS
Author:-Miguel
Made with:-HTML (Haml) / CSS (Sass)
Title:- CSS Typewriter
Author:-Aaron Iker
Made with:-HTML / CSS (SCSS)
Title:- Animation with Offset Motion Blur
Author:-Lasse Diercks
Made with:-HTML / CSS (SCSS)
Title:- CSS Box Dog Animation
Author:-agathaco
Made with:-HTML (Pug) / CSS (SCSS)
Title:- CSS Animation Material Design
Author:-Michiel Bijl
Made with:-HTML (Haml) / CSS (SCSS)
Title:- The Three-Body Problem
Author:-Vian Esterhuizen
Made with:-HTML / CSS (SCSS)
Title:- Pure CSS Animated Bubbles
Author:-Mark Bowley
Made with:-HTML / CSS
Title:- Pure CSS Submarine Animation
Author:-Akhil Sai Ram
Made with:-HTML / CSS (SCSS)
Title:- Pure CSS Animation Kaleidoscope
Author:-maxew
Made with:-HTML / CSS
Title:- Bird Animation
Author:-Akash bhandwalkar
Made with:-HTML / CSS
Title:- Only CSS: Motion Blur
Author:-Yusuke Nakaya
Made with:-HTML (Pug) / CSS (SCSS)
Title:- Transform-box: fill-box
Author:-Cassie Evans
Made with:-HTML / CSS (SCSS)
Title:- Only CSS Animation #01
Author:-Hisami Kurita
Made with:-HTML / CSS
Title:- Dot Menu Animations
Author:-Tamino Martinius
Made with:-HTML / CSS (PostCSS) / JavaScript (TypeScript)
Title:- CSS Only Animated Solar System
Author:-Cynthia Costa
Made with:-HTML / CSS (SCSS)
Title:- Close the Blinds
Author:-Chance Squires
Made with:-HTML / CSS
Title:- CSS Block Revealing Effect
Author:-Abubaker Saeed
Made with:-HTML / CSS
Title:- The Handbook Animation
Author:-Yancy Min
Made with:-HTML / CSS
Title:- Connected Animation
Author:-Sean Codes
Made with:-HTML (Pug) / CSS (SCSS) / JavaScript
Title:- Berlin Animated
Author:-Crystal S
Made with:-HTML / CSS (SCSS)
Title:- Cinematic Animation
Author:-@keyframers
Made with:-HTML / CSS (SCSS)
Title:- CSS Animation with Motion
Author:-Henry Zarza
Made with:-HTML / CSS
Title:- Web Layers Of Pace
Author:-Tom
Made with:-HTML / CSS (SCSS)
Title:- Animation Delay
Author:-yuanchuan
Made with:-HTML / CSS
Title:- Dashboard Ilustration Animated Only with CSS
Author:-Fernando Cohen
Made with:-HTML / CSS (SCSS)
Title:- The Perpetual Mobile
Author:-Jomohop
Made with:-HTML / CSS
Title:- Pure CSS Saturn Hula Hooping
Author:-Jamie Coulter
Made with:-HTML (Haml) / CSS (SCSS)
Title:- Books Hover Animation
Author:-Yancy Min
Made with:-HTML / CSS
Title:- Responsive And Animated Windmill
Author:-Ashish Bardhan
Made with:-HTML (Pug) / CSS (SCSS)
Title:- Paper Pirouette
Author:-@keyframers
Made with:-HTML / CSS (SCSS)
Title:- Cool Layout with Complex Chainable Animation
Author:-Nikolay Talanov
Made with:-HTML / CSS (SCSS) / JavaScript
Title:- Animated Back Glow
Author:-George Hastings
Made with:-HTML / CSS (SCSS)
Title:- Dot Dash
Author:-Adam Kuhn
Made with:-HTML / CSS (SCSS)
Title:- Pure CSS Moustached Nanny Animation
Author:-Julia Muzafarova
Made with:-HTML / CSS (PostCSS)
Title:- Card Swipe Animation
Author:-Michiel Bijl
Made with:-HTML (Haml) / CSS (SCSS)
Title:- CSS Animations with SVGs
Author:-Joyanna
Made with:-HTML / CSS (SCSS)
Title:- UX in Motion. Animation
Author:-Praveen Bisht
Made with:-HTML (Pug) / CSS (SCSS)
Title:- One DIV Growing Flower
Author:-Temani Afif
Made with:-HTML / CSS
Title:- CSS Animation: Indoors or Outdoors?
Author:-Olivia
Made with:-HTML (Pug) / CSS (SCSS) / JavaScript
Title:- Candles (Pure CSS Animation)
Author:-Akhil Sai Ram
Made with:-HTML / CSS (SCSS)
Title:- CSS Animation: Time of Day
Author:-Olivia
Made with:-HTML (Pug) / CSS (SCSS) / JavaScript
Title:- Get Attention Animations
Author:-Jerry Jones
Made with:-HTML (Haml) / CSS (SCSS) / JavaScript (Babel)
Title:- Checkerboard Reveal
Author:-Geoff Graham
Made with:-HTML (Haml) / CSS (SCSS)
Title:- Sausage Dog CSS Only Animation
Author:-Stívali Serna
Made with:-HTML / CSS
Title:- CSS Reveal Animation
Author:-Anthony Fessy
Made with:-HTML / CSS (SCSS) / JavaScript
Title:- CSS Cassette Animation
Author:-Tony Banik
Made with:-HTML (Slim) / CSS (SCSS)
Title:- Circle Becomming Square
Author:-Hayakawa
Made with:-HTML / CSS
Title:- Pure CSS Eye
Author:-Julia Miocene
Made with:-HTML / CSS (PostCSS)
Title:- Only CSS Animation #02
Author:-Hisami Kurita
Made with:-HTML / CSS
Title:- Solar Eclipse Animation
Author:-Aris Acoba
Made with:-HTML (Pug) / CSS (SCSS)
