95 CSS Animation Examples

About a code

Old Film Effect - Pure CSS Animation

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

Responsive: yes

Dependencies: -

About a code

Nosferatu - Pure CSS Animation

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

Responsive: yes

Dependencies: -

About a code

Animation Delay

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

Responsive: yes

Dependencies: -

About a code

CSS Sprite Stop Motion Animation

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

Responsive: no

Dependencies: -

About a code

Pure CSS Blooming Flowers with Falling Leaves

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

Responsive: yes

Dependencies: -

About a code

One DIV Growing Flower

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

Responsive: no

Dependencies: -

About a code

Circles and Lines

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

Responsive: yes

Dependencies: -

About a code

Pure CSS Animation Kaleidoscope

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

Responsive: yes

Dependencies: -

About a code

Dot Dash

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

Responsive: no

Dependencies: -

About a code

Dashboard Ilustration Animated Only with CSS

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

Responsive: yes

Dependencies: -

About a code

Pure CSS Magic Gateways with Houdini

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS only Camera Shutter

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

Responsive: yes

Dependencies: -

About a code

Netflix Intro Animation Pure CSS

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

Responsive: yes

Dependencies: -

About a code

Berlin Animated

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

Responsive: no

Dependencies: -

About a code

Checkerboard Reveal

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

Responsive: yes

Dependencies: -

About a code

Cinematic Animation

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

Responsive: yes

Dependencies: -

About a code

Welcome

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

Responsive: yes

Dependencies: -

About a code

AnimXYZ Example

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

Responsive: no

Dependencies: animxyz.css

About a code

Bird Animation

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

Responsive: yes

Dependencies: -

About a code

Mood Swing

An infinitely looping animation in CSS.

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

Responsive: no

Dependencies: -

About a code

Neumorphism Animation

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

Responsive: yes

Dependencies: -

About a code

CSS Animation with Motion

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

Responsive: yes

Dependencies: -

About a code

Day and Night: CSS Transitions and Animations Explained

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

Responsive: yes

Dependencies: -

About a code

Desk CSS Animation

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

Responsive: yes

Dependencies: -

About a code

Only CSS: Moon Clip

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

Responsive: no

Dependencies: -

About a code

CSS is Awesome

A zero div infinite zoom animation.

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

Responsive: yes

Dependencies: -

About a code

CSS Animated 3D Toaster

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

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

Responsive: yes

Dependencies: -

About a code

CSS Only Animated Solar System

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

Responsive: yes

Dependencies: -

About a code

Folding Panorama Animation

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

Responsive: yes

Dependencies: -

About a code

CSS Animation SVG Building

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

Responsive: yes

Dependencies: -

About a code

Close the Blinds

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

Responsive: yes

Dependencies: -

About a code

CSS Animations with SVGs

Transitions & animations combined with SVGs.

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

Responsive: yes

Dependencies: -

About a code

Pure CSS Eye

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

Responsive: no

Dependencies: -

About a code

Sausage Dog CSS Only Animation

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

Responsive: yes

Dependencies: -

About a code

Rock'N'Roll Half-Marathon Animation

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

Responsive: yes

Dependencies: -

About a code

Letter CSS Animation

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

Responsive: yes

Dependencies: -

About a code

Evening Lanterns

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

Responsive: no

Dependencies: -

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

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

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

About a code

Only CSS 3D Cube

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

Responsive: no

Dependencies: -

About a code

Web Layers Of Pace

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

Responsive: yes

Dependencies: -

About a code

CSS Typewriter

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

Responsive: no

Dependencies: -

About a code

Only CSS: Motion Blur

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

Responsive: no

Dependencies: -

About a code

Animation with Offset Motion Blur

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

Responsive: no

Dependencies: -

About a code

Only CSS Animation #02

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

Responsive: yes

Dependencies: -

About a code

Only Css Animation #03

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

Responsive: yes

Dependencies: -

About a code

Paper Pirouette

3D CSS-only flying page animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Only CSS Animation #01

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

Responsive: yes

Dependencies: -

About a code

Circle Becomming Square

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

Responsive: no

Dependencies: -

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

About a code

Product Page

Product page with CSS keyframes animation.

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

Responsive: no

Dependencies: font-awesome.css

About a code

Fake Variable Font with CSS

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

Responsive: yes

Dependencies: -

About the code

SVG Animation

Some SVG animation & keyframes.

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

Responsive: yes

Dependencies: -

About a code

Transform-box: fill-box

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

Responsive: yes

Dependencies: -

About the code

Animated Sticker

Animated sticker in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Rock Hand Animation

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

Responsive: no

Dependencies: -

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

About the code

Pure CSS Submarine Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Candles (Pure CSS Animation)

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

Responsive: no

Dependencies: -

About the code

Whale And The Moon

Pure CSS whale and the moon animation.

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

Responsive: no

Dependencies: -

About the code

CSS Cassette Animation

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

Responsive: yes

Dependencies: -

About the code

Coffee Machine Animation

Coffee machine pure CSS animation.

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

Responsive: no

Dependencies: -

About the code

Solar Eclipse Animation

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

Responsive: yes

Dependencies: -

About the code

CSS Box Dog Animation

...

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

Responsive: no

Dependencies: -

About the code

CSS Lighthouse Scene

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Bits And Bytes CSS Animation

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

Responsive: no

Dependencies: -

About a code

Crypto Web3 Blockchain Animation

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

Responsive: yes

Dependencies: -

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

About the code

Loop Animation

Magnifying glass scrolling loop animation.

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

Responsive: no

Dependencies: font-awesome.css

About the code

Pure CSS Moustached Nanny Animation

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

Responsive: no

Dependencies: -

About the code

The Handbook Animation

The handbook download animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Books Hover Animation

Good hover animation for book cover.

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

Dependencies: -

About the code

Connected Animation

Simple connected animation for modal windows.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Responsive And Animated Windmill

Windmill (Pug + SCSS) - responsive & animated.

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

Responsive: yes

Dependencies: -

About a code

CSS Mask Animation

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

Responsive: yes

Dependencies: -

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

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

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

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

About a code

UX in Motion. Animation

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

Responsive: yes

Dependencies: -

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

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

About the code

Pure CSS Sponge

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

Responsive: no

Dependencies: -

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

About the code

Animated Back Glow

Psuedo element & background gradient animation & blur.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About a code

Loving Car - Pure CSS with Animation

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

Responsive: yes

Dependencies: -

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

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

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

About the code

Card Swipe Animation

Card swipe animation Material Design.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Animation Material Design

HTML and CSS Material Design with animation.

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

Dependencies: -

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

About the code

Pure CSS Animated Bubbles

Animated bubbles using nothing but HTML and CSS.

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

Dependencies: -

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

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

About the code

Cloudy Spiral

Cloudy spiral CSS animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -