75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

I recreated and animated the design from my half-marathon t-shirt (http://kylephx.com/h/las-vegas-half.jpg)

Inspired by Liu Cixin's sci-fi novel The Three-Body Problem I built this pen

David Khourshid and Stephen Shaw recreate a beautiful 3D isometric flying paper animation using CSS only! ⏰ Streamed live on September 16, 2019 at https://twitch.tv/keyframers 💡 Inspiration: https://dribbble.com/shots/7127901-Dialog/attachments/131339 📺 Video: https://youtu.be/Fdq95qVG...

Read More

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

CodePen Challenge - water. SVG chemical flask is slightly animated with CSS.

Original artwork by Sailesh Gunasekaran on dribbble

I did my best at recreating this awesome animation by Tony Babel with CSS only. Original: https://dribbble.com/shots/4934623-Box-Doggie Also this pen by David Khourshid https://codepen.io/davidkpiano/pen/Xempjq helped me figure out the tail animation

Inktober Day 12 Prompt: Whale Not everyday you see a whale, do you?

Recreated the dribbble shot by Gal shir. in complete CSS Animations. Here is the link https://dribbble.com/shots/2516854-Candles .

Conceptualized from our company blitz

Had fun bringing to life this illustration. Originally created for https://raygun.com/

Four different menu animations for menu button toggle between dots, cross and back icon. Prefer Hamburgers? Go this way: https://codepen.io/Zaku/details/ejLNJL/ Additional Source: https://github.com/tamino-martinius/ui-snippets-menu-animations

this might only work in chrome! Transitioning on calc is likely not legal

So after a lot of requests... Here's again a lovely animated #Windmill to blow your mind letting your imaginations flow... Literally. 😜 This kinda reminds me of that "Floating Windmill" scene over the clouds in "Feel Good Inc." music video by @gorillaz. Don't you think? 🤔

Sometimes you want to draw attention to an element on your page. Some of these are subtle. Some of them are not.

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. ... YES I CAN :D Icons: flaticon.com.

CSS-only border animation on hover. It needs a solid background in order to work.

I often see this type of skewed image design for apps and websites, as well as graphic design portfolios. What if we animated that into an image gallery? This gallery utilizes CSS Grid Layout and CSS3 perspective to create something a little unique.

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

Here's an svg from my lovely Lina - her flat design amusement park for debut dribbble shot, animated by me with power of pure css3, made here at Zajno https://dribbble.com/shots/2747921-Flat-Vector-Ferris-Wheel-Animation

Psuedo Element + Background Gradient Animation + Blur = Badass

Card swipe animation based on this Dribbble: https://dribbble.com/shots/1721120-Keynote-animation-recreation

I wanted to animated waves for the background of a page. Initially I tried a staggered loop animation in Javascript, but some mobile devices struggled really bad. This CSS3 version is hardware accelerated, simple, and is much more performant.

Animated Bubbles using nothing but HTML and CSS.

Just experimenting with some SVG animations and interactivity for a "Fake Fruit Shop". Chrome only for now.

Pure CSS, lightweight signature animation.

Started building a loading indicator but ended up with this... thing.

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

Experimenting in 3d, VR inspired card layout feat. skateboarding theme

Desafio 30 dias CSS - dia 22

This animation simulates breadcrumbs falling from top of the header

Desafio 30 dias CSS - dia 16

Hover the set of cards to trigger the unfolding animation

An animation that activates when you hover over a card! Demo by Simon Codrington accompanying the article "Seven Creative UI Design Ideas You Can Use In Your Next Website" for SitePoint.

Clean and intuitive interface : showcasing extraneous details on hover. Still need to make it responsive to make it look perfect for mobile devices .