Drove of free HTML and CSS animation code examples. Update of June 2022 drove. 17 new items.

  1. CSS Animation Libraries
  2. CSS Page Transitions

Fabricated with

  • HTML (Haml) / CSS (SCSS)

Most a code

Checkerboard Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS)

Well-nigh a code

Cinematic Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yeah

Dependencies: -

Author

  • Toshiya Marukubo

Made with

  • HTML (Pug) / CSS (Stylus)

Almost a code

Welcome

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Author

  • designcourse

Fabricated with

  • HTML / CSS (SCSS)

About a code

AnimXYZ Example

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: animxyz.css

Author

  • Akash bhandwalkar

About a code

Bird Animation

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Writer

  • Alexander Mold

Made with

  • HTML / CSS (Sass)

About a code

Mood Swing

An infinitely looping animation in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • masuwa

About a code

Neumorphism Animation

Uniform browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: aye

Dependencies: -

Author

  • Henry Zarza

About a code

CSS Blitheness with Motility

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: aye

Dependencies: -

Author

  • Stéphanie Walter

Made with

  • HTML / CSS (SCSS)

About a lawmaking

Day and Nighttime: CSS Transitions and Animations Explained

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Luiso Martínez

Virtually a lawmaking

Desk CSS Animation

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Yusuke Nakaya

Fabricated with

  • HTML (Pug) / CSS (SCSS)

About a lawmaking

Only CSS: Moon Clip

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Writer

  • Mikael Ainalem

About a code

CSS is Awesome

A cypher div infinite zoom animation.

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Author

  • Jhey

Fabricated with

  • HTML (Pug) / CSS (Stylus)

Nigh a lawmaking

CSS Animated 3D Toaster

Click the toaster for bread flips. Hover page edges to rotate.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Writer

  • Cynthia Costa

Fabricated with

  • HTML / CSS (SCSS)

Almost a lawmaking

CSS Only Animated Solar Organisation

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Bennett Feely

Made with

  • HTML (Slim) / CSS (SCSS)

Most a code

Folding Panorama Blitheness

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yeah

Dependencies: -

Writer

  • Luiso Martínez

About a code

CSS Animation SVG Edifice

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chance Squires

About a code

Close the Blinds

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Joyanna

Made with

  • HTML / CSS (SCSS)

Nearly a code

CSS Animations with SVGs

Transitions & animations combined with SVGs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Julia Miocene

Made with

  • HTML / CSS (PostCSS)

Almost a code

Pure CSS Eye

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Stívali Serna

About a code

Sausage Domestic dog CSS Simply Animation

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: aye

Dependencies: -

Author

  • Kyle

Made with

  • HTML / CSS (SCSS)

Most a lawmaking

Stone'N'Roll Half-Marathon Blitheness

Uniform browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Miguel

Made with

  • HTML / CSS (Sass)

About a code

Letter CSS Blitheness

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Writer

  • Braydon Coyer

Fabricated with

  • HTML (Pug) / CSS (SCSS)

Well-nigh a lawmaking

Evening Lanterns

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Writer

  • Vian Esterhuizen

Made with

  • HTML / CSS (SCSS)

About a code

The 3-Trunk Problem

Inspired by Liu Cixin's Sci-Fi novel 'The 3-Body Problem'.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS)

About a code

2020 SVG Animation

David Khourshid and Stephen Shaw celebrate the new year with this fun 2022 blitheness using manus-drawn SVG paths while showing how to simplify stroke-dasharray/stroke-dashoffset animations with pathLength=one.

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Abubaker Saeed

About a code

CSS Cake Revealing Event

Change --td (full duration) to increase/subtract the time of the effect.

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Hisami Kurita

Made with

  • HTML / CSS (SCSS)

Nearly a lawmaking

Just CSS 3D Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Writer

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

Nigh a lawmaking

CSS Typewriter

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

Virtually a code

Only CSS: Motion Blur

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Lasse Diercks

Made with

  • HTML / CSS (SCSS)

Near a code

Animation with Offset Motion Mistiness

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Hisami Kurita

About a code

But CSS Animation #02

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Hisami Kurita

About a code

Merely Css Animation #03

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS)

Most a code

Paper Pirouette

3D CSS-simply flying folio animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Author

  • Hisami Kurita

Virtually a code

Only CSS Blitheness #01

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Author

  • Hayakawa

Nigh a code

Circle Becomming Square

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jomohop

Most a code

The Perpetual Mobile

The rotation movement is not directly related to the motility, then there are no obvious repetitions and the animation is more than attractive.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kaio Almeida

Fabricated with

  • HTML / CSS (SCSS)

About a code

Product Folio

Product page with CSS keyframes animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Miguel

Made with

  • HTML (Haml) / CSS (Sass)

Near a code

Fake Variable Font with CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: aye

Dependencies: -

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

SVG Animation

Some SVG animation & keyframes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Writer

  • Cassie Evans

Made with

  • HTML / CSS (SCSS)

Almost a code

Transform-box: fill up-box

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yeah

Dependencies: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less)

About the lawmaking

Animated Sticker

Animated sticker in HTML and CSS.

Uniform browsers: Chrome, Firefox, Opera, Safari

Responsive: aye

Dependencies: -

Author

  • Vangel Tzo

Made with

  • HTML / CSS (SCSS)

About the code

Rock Hand Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ekaterina Vasilyeva

About the code

Water - Chemic Flask Animation

SVG chemical flask is slightly blithe with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Author

  • Akhil Sai Ram

Made with

  • HTML / CSS (SCSS)

Near the code

Pure CSS Submarine Animation

Uniform browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Akhil Sai Ram

Made with

  • HTML / CSS (SCSS)

About the code

Candles (Pure CSS Animation)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aswin Behera

Virtually the code

Whale And The Moon

Pure CSS whale and the moon animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tony Banik

Made with

  • HTML (Slim) / CSS (SCSS)

Virtually the code

CSS Cassette Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yep

Dependencies: -

Author

  • Henrique Rodrigues

Almost the lawmaking

Coffee Machine Animation

Coffee car pure CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aris Acoba

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Solar Eclipse Blitheness

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • agathaco

Fabricated with

  • HTML (Pug) / CSS (SCSS)

Near the code

CSS Box Dog Animation

...

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • agathaco

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Lighthouse Scene

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Writer

  • Ollie

Made with

  • HTML / CSS (SCSS)

Most the code

Bits And Bytes CSS Animation

Uniform browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Dot Menu Animations Dot Menu Animations - GIF Demo

Author

  • Tamino Martinius

Fabricated with

  • HTML / CSS (PostCSS) / JavaScript (TypeScript)

Most the code

Dot Menu Animations

4 different menu animations for menu push toggle between dots, cross and back icon.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Yancy Min

Almost the code

Loop Animation

Magnifying drinking glass scrolling loop animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Writer

  • Julia Muzafarova

Made with

  • HTML / CSS (PostCSS)

Most the lawmaking

Pure CSS Moustached Nanny Blitheness

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: The Handbook Animation The Handbook Animation - GIF Demo

Author

  • Yancy Min

About the code

The Handbook Blitheness

The handbook download animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Books Hover Animation Books Hover Animation - GIF Demo

Writer

  • Yancy Min

About the code

Books Hover Animation

Good hover animation for book cover.

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Connected Animation Connected Animation - GIF Demo

Author

  • Sean Codes

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

About the code

Connected Animation

Simple connected animation for modal windows.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Ashish Bardhan

Fabricated with

  • HTML (Pug) / CSS (SCSS)

Nigh the lawmaking

Responsive And Animated Windmill

Windmill (Pug + SCSS) - responsive & animated.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yeah

Dependencies: -

Made with

  • HTML / CSS (SCSS)

About a code

CSS Mask Blitheness

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Animation: Time of Day CSS Animation: Time of Day - GIF Demo

Writer

  • Olivia

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

About the lawmaking

CSS Animation: Fourth dimension of Solar day

CSS animations experiment.

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: elementary-line-icons.css, jquery.js

Demo image: CSS Animation: Indoors or Outdoors? CSS Animation: Indoors or Outdoors? - GIF Demo

Author

  • Olivia

Fabricated with

  • HTML (Pug) / CSS (SCSS) / JavaScript

About the code

CSS Animation: Indoors or Outdoors?

Recently was involved in a projection where we had to practise animations. We used After Effects > JSON > some plugin magic for information technology but I was wondering if I could replicate the exact same event with CSS. - Olivia

Uniform browsers: Chrome, Border, Firefox, Opera, Safari

Dependencies: simple-line-icons.css, jquery.js

Demo image: CSS Only Border Animation CSS Only Border Animation - GIF Demo

Author

  • Danny Joris

Made with

  • HTML (Pug) / CSS (SCSS)

Near the code

CSS Just Edge Animation

CSS-just border animation on hover. Information technology needs a solid background in social club to work.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Pure CSS Saturn Hula Hooping

Titan watches Saturn hula hoop! A conversion of this gif into pure CSS: https://dribbble.com/shots/4252236-Saturn-Hula-Hooping

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Get Attention Animations Get Attention Animations - GIF Demo

Author

  • Jerry Jones

Made with

  • HTML (Haml) / CSS (SCSS) / JavaScript (Boom-boom)

Near the lawmaking

Go Attending Animations

Sometimes y'all desire to draw attention to an chemical element on your page. Some of these are subtle. Some of them are not.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Perspective Grid with Animation

Author

  • Brian Haferkamp

Made with

  • HTML (Pug) / CSS (Sass) / JavaScript

Well-nigh the code

Perspective Grid with Animation

This gallery utilizes CSS Filigree Layout and CSS3 perspective to create something a piddling unique.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Writer

  • Julia Muzafarova

Made with

  • HTML / CSS (SCSS)

Most the code

Pure CSS Sponge

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Reveal Animation CSS Reveal Animation - GIF Demo

Author

  • Anthony Fessy

Fabricated with

  • HTML / CSS (SCSS) / JavaScript

Almost the lawmaking

CSS Reveal Animation

An css blitheness that reveals the text and image with delay/direction.

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Animated Back Glow

Author

  • George Hastings

Made with

  • HTML / CSS (SCSS)

Nearly the code

Blithe Back Glow

Psuedo element & background gradient animation & blur.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Cool Layout with Complex Chainable Animation

Author

  • Nikolay Talanov

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Cool Layout with Complex Chainable Animation

Based on this - https://dribbble.com/shots/2802024-Satellite-Website-Prototype. Based on addition of just two classes with JS (and simple hover) this demo features a lot of cool chaining animations, combined with proficient performance and sort-of easy-to-maintain SCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Flat Design Amusement Park with CSS Animation

Author

  • Vladimir Gashenko

Most the code

Apartment Design Entertainment Park with CSS Animation

Flat design Amusement park animated with power of pure CSS3.

Uniform browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS & SVG Waves Animation

Author

  • Ted McDonald

Made with

  • HTML / CSS (SCSS)

Nearly the code

CSS & SVG Waves Blitheness

This CSS3 version is hardware accelerated, simple, and is much more performant.

Uniform browsers: Chrome, Border, Firefox, Opera, Safari

Dependencies: -

Demo image: Card Swipe Animation Card Swipe Animation - GIF Demo

Author

  • Michiel Bijl

Fabricated with

  • HTML (Haml) / CSS (SCSS)

About the lawmaking

Carte Swipe Animation

Carte swipe animation Material Design.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Animation Material Design CSS Animation Material Design - GIF Demo

Author

  • Michiel Bijl

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

CSS Blitheness Material Pattern

HTML and CSS Textile Design with blitheness.

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Shopping Cart Icons Animated Shopping Cart Icons - GIF Demo

Author

  • Joni Trythall

Made with

  • HTML / CSS / JavaScript

Well-nigh the code

Animated Shopping Cart Icons

But experimenting with some SVG animations and interactivity for a "Fake Fruit Shop".

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Pure CSS Animated Bubbles

Writer

  • Mark Bowley

About the code

Pure CSS Animated Bubbles

Blithe bubbles using nil but HTML and CSS.

Uniform browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Flame Animation CSS Flame Animation - GIF Demo

Writer

  • Adrian Payne

Near the code

CSS Flame Animation

An animated flame using only CSS3 animations and box-shadow. Wanted to meet if I could make fire with but CSS - flame on!

Uniform browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Signature Animation Signature Animation - GIF Demo

Author

  • Damian Drygiel

Fabricated with

  • HTML / CSS (Less)

Nearly the code

Signature Animation

Pure CSS, lightweight signature blitheness. No GIF animation, only lighweight (20KB) PNG sequence animated using CSS3. 'Replay' blitheness button with no JS, pure CSS. Modify color of sign on hover.

Compatible browsers: Chrome, Border, Firefox, Opera, Safari

Dependencies: -

Demo image: Cloudy Spiral

Writer

  • Hakim El Hattab

Fabricated with

  • HTML (Haml) / CSS (SCSS)

Well-nigh the code

Cloudy Spiral

Cloudy spiral CSS animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -