Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!
CSS3 Clock With jQuery
Analogue Clock
3D Cube That Rotates Using Arrow Keys
Multiple 3D Cubes (Slide In/Out)
CSS3 Accordion
Auto-Scrolling Parallax
Isocube
Image Gallery
Matrix
7 Javascript-effect Alternatives Using CSS3
Image Hover Effects
Turning Coke Can (Control With Scrollbar)
3D Meninas
Polaroid Gallery
Space
Note: this one is graphic intense and takes a while to load, but the result is crazy!
Mac Dock
Drop-In Modals
Sliding Vinyl
Zooming Polaroids
Animated Rocket
Poster Circle
Morphing Cubes
Falling Leaves
Animated Polaroid Gallery
Spotlight Cast Shadow
Colorful Clock
Lightbox Gallery (Draggable)
Elastic Thumbnail Menu
Coverflow
Snowflakes
jQuery DJ Hero
Dynamic Stacking Cards
Another Image Gallery
Snow Stack (Control With Arrow Keys)
Animated Pricing Column
Slick jQuery Menu
CSS3
CSS Tabs Without Javascript
Tab Menus Without Javascript
SVG Fisheye Menu
Dynamic Presentation Without Flash
Rotating Gallery
Dropdown Menu
Another Fisheye
Frame-by-Frame Animation (Hover to Play)
Another Accordion
AT-AT Walker (No Flash or Javascript)
CSS3 animations are so cool! I’m using them on my teaser page, way more easier and sexy than JS :)
Great article, some amazing, inspirational stuff there. Love it, thanks.
OK, now the possibilities are really UNLIMITED. I’ve never tried CSS3 before, but I’ll certainly do it.
Thanks again for this wonderful post, NickLa.
looks not that smooth as if it was flash.
Of course bigger flash websites aren’t that smooth on old PCs…
we will see what the future will show.
@Nick La
Thanks for the list but i think “Dropdown Menu” (no. 43) has a missing link. The link showing page not found.
Wow, that is so amazing. I want to learn more about CSS3! Thanks Nick!
Thanks a bunch for featuring my Dynamic Stacks of Index Cards Tutorial!
Two days it was featured on Smashing Magazine and now here…I can’t believe it.
In any case another great collection of CSS3 Tutorials. Hopefully people will start renouncing IE6 & co. soon.
Terrible! Excellent!
The analog clocks, a can of Coca-Cola, the CDs down, the rotating image gallery and animation of Futurama are the best examples of CSS3.
Sorry for my poor English. Very good post, congratulations!
A greeting from Argentina.
» Alvago »»» alvago.com.ar
Thanks so much for featuring my demos. Just as a note: both are not CSS3 but CSS1 and CSS2.1.
Oh and… I love your blog theme! :)
I don’t know why but for some reason there are several of these examples that aren’t working on my Firefox… like the 5 prior examples and the Snow Stack, or the rotating gallery…
Wow ! It’s a great list !
So when will we some of these in Firefox? (talking about the 3d and transitions)
thanks this is a great resource
This is awesome! I guess I’ve just had my head in the sand, because I had no clue about most of these. Good work, I’m excited to start trying this stuff out on my own.
There’s some great stuff here! I’d figured out recently that you could make Matrix-style effects using multiple text-shadow instances, but seeing a similar thing animated is really crazy! Can’t wait until IE supports CSS3.
Whilst quite impressive, I’m still not convinced that blurring the lines between mark-up, presentation and behaviour is the best idea. After all, did we not spend a number of years promoting their separation into HTML, CSS and Javascript, respectively?
Um – let me get this straight you are presenting things which were being done ten years ago in flash as being awesome – none of this is even one-one thousanth of what flash can do today – and even when you do verge on being able to do something decent – CAVEAT – processor intensive watch out !!!!
Ridiculous – either you stick to your text and static web and hate flash – or embrace animation and dynamic presentation and subsequently FLASH – either way this wreaks of hypocricy.
Hi,
thank you for the collection. I build another animated toolbar with reflection. Take a look at: Animated toolbar with reflection (CSS3) :-)
What a list! This really makes me want to get experimenting with CSS3!
Very nice effects, let’s see how is it going to be the compatibility.