Collection of free HTML and CSS animation code examples. Update of May 2019 collection. 22 new items.

Related Articles

  1. CSS Animation Libraries
  2. CSS Page Transitions

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Close the Blinds

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

Responsive: yes

Dependencies: -

Author

  • Joyanna

Made with

  • HTML / CSS (SCSS)

About 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)

About a code

Pure CSS Eye

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

Responsive: no

Dependencies: -

Author

  • Stívali Serna

Made with

  • HTML / CSS

About a code

Sausage Dog CSS Only Animation

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

Responsive: yes

Dependencies: -

Author

  • Kyle

Made with

  • HTML / CSS (SCSS)

About a code

Rock'N'Roll Half-Marathon Animation

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

Responsive: yes

Dependencies: -

Author

  • Miguel

Made with

  • HTML / CSS (Sass)

About a code

Letter CSS Animation

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

Responsive: yes

Dependencies: -

Author

  • Braydon Coyer

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Evening Lanterns

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

Responsive: no

Dependencies: -

Author

  • Vian Esterhuizen

Made with

  • HTML / CSS (SCSS)

About a code

The Three-Body Problem

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

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

Responsive: yes

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 2020 animation using hand-drawn SVG paths while showing how to simplify stroke-dasharray/stroke-dashoffset animations with pathLength=1.

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

Responsive: no

Dependencies: -

Author

  • Abubaker Saeed

Made with

  • HTML / CSS

About a code

CSS Block Revealing Effect

Change --td (total duration) to increase/decrease the time of the effect.

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

Responsive: yes

Dependencies: -

Author

  • Hisami Kurita

Made with

  • HTML / CSS (SCSS)

About a code

Only CSS 3D Cube

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

CSS Typewriter

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

Responsive: no

Dependencies: -

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Only CSS: Motion Blur

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

Responsive: no

Dependencies: -

Author

  • Lasse Diercks

Made with

  • HTML / CSS (SCSS)

About a code

Animation with Offset Motion Blur

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

Responsive: no

Dependencies: -

Author

  • Hisami Kurita

Made with

  • HTML / CSS

About a code

Only CSS Animation #02

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

Responsive: yes

Dependencies: -

Author

  • Hisami Kurita

Made with

  • HTML / CSS

About a code

Only Css Animation #03

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

Responsive: yes

Dependencies: -

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS)

About a code

Paper Pirouette

3D CSS-only flying page animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Hisami Kurita

Made with

  • HTML / CSS

About a code

Only CSS Animation #01

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

Responsive: yes

Dependencies: -

Author

  • Hayakawa

Made with

  • HTML / CSS

About a code

Circle Becomming Square

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

Responsive: no

Dependencies: -

Author

  • Jomohop

Made with

  • HTML / CSS

About a code

The Perpetual Mobile

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

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

Responsive: no

Dependencies: -

Author

  • Kaio Almeida

Made with

  • HTML / CSS (SCSS)

About a code

Product Page

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)

About a code

Fake Variable Font with CSS

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

Responsive: yes

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: yes

Dependencies: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less)

About the code

Animated Sticker

Animated sticker in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

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

Made with

  • HTML / CSS

About the code

H2O - Chemical Flask Animation

SVG chemical flask is slightly animated with CSS.

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

Responsive: yes

Dependencies: -

Author

  • Akhil Sai Ram

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Submarine Animation

Compatible 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

Made with

  • HTML / CSS

About 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)

About the code

CSS Cassette Animation

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

Responsive: yes

Dependencies: -

Author

  • Henrique Rodrigues

Made with

  • HTML / CSS

About the code

Coffee Machine Animation

Coffee machine 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 Animation

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

Responsive: yes

Dependencies: -

Author

  • agathaco

Made with

  • HTML (Pug) / CSS (SCSS)

About 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: -

Author

  • Ollie

Made with

  • HTML / CSS (SCSS)

About the code

Bits And Bytes CSS Animation

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

Responsive: no

Dependencies: -

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

Author

  • Tamino Martinius

Made with

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

About the code

Dot Menu Animations

Four different menu animations for menu button toggle between dots, cross and back icon.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Yancy Min

Made with

  • HTML / CSS

About the code

Loop Animation

Magnifying glass scrolling loop animation.

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Julia Muzafarova

Made with

  • HTML / CSS (PostCSS)

About the code

Pure CSS Moustached Nanny Animation

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

Responsive: no

Dependencies: -

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

Author

  • Yancy Min

Made with

  • HTML / CSS

About the code

The Handbook Animation

The handbook download animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Yancy Min

Made with

  • HTML / CSS

About the code

Books Hover Animation

Good hover animation for book cover.

Compatible 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

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive And Animated Windmill

Windmill (Pug + SCSS) - responsive & animated.

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

Responsive: yes

Dependencies: -

Author

  • Shaw

Made with

  • HTML / CSS (SCSS)

About a code

CSS Mask Animation

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

Responsive: yes

Dependencies: -

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

Author

  • Olivia

Made with

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

About the code

CSS Animation: Time of Day

CSS animations experiment.

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

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

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

Author

  • Olivia

Made with

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

About the code

CSS Animation: Indoors or Outdoors?

Recently was involved in a project where we had to do animations. We used After Effects > JSON > some plugin magic for it but I was wondering if I could replicate the exact same effect with CSS. - Olivia

Compatible browsers: Chrome, Edge, 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)

About the code

CSS Only Border Animation

CSS-only border animation on hover. It needs a solid background in order 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 (Babel)

About the code

Get Attention Animations

Sometimes you want to draw attention to an 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

About the code

Perspective Grid with Animation

This gallery utilizes CSS Grid Layout and CSS3 perspective to create something a little unique.

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

Dependencies: jquery.js

Author

  • Julia Muzafarova

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Sponge

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

Responsive: no

Dependencies: -

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

Author

  • Anthony Fessy

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

CSS Reveal Animation

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

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

Dependencies: jquery.js

Demo image: Animated Back Glow

Author

  • George Hastings

Made with

  • HTML / CSS (SCSS)

About the code

Animated 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 2 classes with JS (and simple hover) this demo features a lot of cool chaining animations, combined with good 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

Made with

  • HTML / CSS

About the code

Flat Design Amusement Park with CSS Animation

Flat design Amusement park animated with power of pure CSS3.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS & SVG Waves Animation

Author

  • Ted McDonald

Made with

  • HTML / CSS (SCSS)

About the code

CSS & SVG Waves Animation

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

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

Dependencies: -

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

Author

  • Michiel Bijl

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Card Swipe Animation

Card 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 Animation Material Design

HTML and CSS Material Design with animation.

Compatible 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

About the code

Animated Shopping Cart Icons

Just 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

Author

  • Mark Bowley

Made with

  • HTML / CSS

About the code

Pure CSS Animated Bubbles

Animated bubbles using nothing but HTML and CSS.

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

Dependencies: -

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

Author

  • Adrian Payne

Made with

  • HTML / CSS

About the code

CSS Flame Animation

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Signature Animation Signature Animation - GIF Demo

Author

  • Damian Drygiel

Made with

  • HTML / CSS (Less)

About the code

Signature Animation

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

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

Dependencies: -

Demo image: Cloudy Spiral

Author

  • Hakim El Hattab

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Cloudy Spiral

Cloudy spiral CSS animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -