Get our posts emailed to you with our monthly newsletter, subscribe here.

Nothing says modern web design quite like CSS-only animation. Just a decade ago this seemed like a common pipe dream. But thanks to some whizzes over at the W3C the world is now a better place with CSS-animated page elements.

Below I’ve put together a huge gallery of 40+ open source CSS3 animation codes. Both developers and designers can benefit greatly from this collection.

All of these snippets are built to run in CSS3-compliant browsers using transitions and keyframes. Take a look over these code samples to see if you can implement any of them into your own web design work.

CSS Accordion

css accordion animation code

Pulsing Button

blue pusing button animation css3

Knob Rotation

glowing knob rotation animation interface

3D Animated Menu

3d animated menu ui open source css3

Share Heart Effect

share heart effect social media links

Dropdown Menu

animated dropdown menu ui design

CSS3 Animated Text

css3 text animation effect design

iMac Icon

apple imac computer icon animation

Search Form

search form expandable animated code

Car Animation

css3 parallax animated car graphic

Text Blur Animation

text blurring animation effect code

Shape Transition

css3 shape transition conversion

Logo Animate

green logo graphic glyph animated

Glowing Bubbles

bubble glow effect css3 loader

Social Media Icons

social media icons css3 animation

Lazy-Loading Layout

lazy loading content layout css3

In Progress

shapes colors conversion animation

CSS-Only Checkboxes

css3 animated checkboxes interface

Olympics Loader

css3 olympic rings loader animation

Fish Tank Animation

fish tank animation css3 open source

Notification Menu

vertical dark navigation menu notification bubble

Overlay Nav

dark overlay navigation interface

Loading Bar

pink loading bar css3 animation

Figure 8

loading animation figure 8 eight

Slow Roll

slow roll css3 animation

CSS3 Carousel

css3 animated carousel slideshow effect

Orbital CSS

orbital css3 animation icons

Hop Notification Bubble

hop animation notification bubbles

Flyout Menu

horizontal flyout menu links interface

Progress Bar

css3 progress bar interface flags

Sign Up Form

animated clean signup form html5 css3

Circle Animation

circle animated effect css3 open source

Impulse Loader

impulse loader effect css3

Circular Loader

css3 loader circles interface ui codes

You’ve Got Mail

pink letter css3 animated icon

Text Input Animation

text field input animation css3

Material Design Hamburger

material design google hamburger menu icon

Text Scroller

css animation text scroller design code

Toggle Navigation

pure css toggle navigation flyout

Bunch of Buttons

green blue animated buttons css3

SVG Checkboxes

css3 svg checkbox interfaces animation

Pure CSS3 Drop-down

dropdown navigation menu pure css3 open source

iOS 8 CSS Switch

ios8 flat green switch on off css3 code

Parallax Motion

moon sky streetlights parallax animated effect

Posted by Jake Rocheleau

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design and web development techniques. You can check out his work on Dribbble and follow his tweets @jakerocheleau.