Best 21+ Free CSS Animations

BOOKS HOVER ANIMATION

Good hover animation for book cover by Yancy Min.

Demo and Download code

CONNECTED ANIMATION

Simple connected animation for modal windows by Sean Codes. Compatible with Chrome, Firefox, Opera, Safari.

Demo and Download code

CSS ANIMATION: TIME OF DAY

CSS animations experiment by Olivia Compatible with Chrome, Edge, Firefox, Opera, Safari.

Demo and 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

Demo and 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

Demo and code

FLAT DESIGN AMUSEMENT PARK WITH CSS ANIMATION

Flat design Amusement park animated with power of pure CSS3 by Vladimir Gashenko.

Compatible browsers:Chrome, Firefox, Opera, Safari

Demo and code

CSS & SVG WAVES ANIMATION

This CSS3 version is hardware accelerated, simple, and is much more performant by Ted McDonald

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

Demo and code

CARD SWIPE ANIMATION

Card swipe animation Material Design by Michiel Bijl.

Compatible browsers:Chrome, Firefox, Opera, Safari

Demo and code

CSS ANIMATION MATERIAL DESIGN

HTML and CSS Material Design with animation by Michiel Bijl.

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

Demo and code

ANIMATED SHOPPING CART ICONS

Just experimenting with some SVG animations and interactivity for a “Fake Fruit Shop” by Joni Trythall.

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

Demo and code

PURE CSS ANIMATED BUBBLES

Animated bubbles using nothing but HTML and CSS by Mark Bowley.

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

Demo and 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! by Adrian Payne

Compatible browsers:Chrome, Firefox, Opera, Safari

Demo and 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 by Damian Drygiel.

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

Demo and code

CLOUDY SPIRAL

Cloudy spiral CSS animation by Hakim El Hattab.

Compatible browsers:Chrome, Firefox, Opera, Safari

Demo and code