Post thumbnail: 21 CSS Animation Examples

21 CSS Animation Examples

Collection of free HTML and CSS animation code examples.

Related Articles

  1. CSS Animation Libraries
  2. CSS Page Transitions
  3. CSS Border Animations

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

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

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

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

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

back to top