Learn CSS Animation with 100+ CodePen Examples

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)