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)
Hey guys,
I just found a website which pays you for mostly everything. First i thought that it can’t be real but i got paid more than 18$ by now.
If you wanna join please join under me:
Thanks alot, and see you there ;)
Hey guys,
I just found a website which pays you for mostly everything. First i thought that it can’t be real but i got paid more than 18$ by now.
If you wanna join please join under me: ro2.biz/index.php?id=2018
Thanks alot, and see you there ;)
Come here register and find or post any tutorials : thextop.org
Wicked collection! :D I’ve bookmarked this post so I could check it when I want to learn these things. (Don’t delete this post please.) Thank you. ☺
Great CSS3 thanks!
The designs are very cool. I’ve learn a lot about CSS3 from your site. I am going use CSS3 in my site. Thanks for sharing CSS3 information.
I think its grid is really doing great.
This is great!!!This topic is truly relevant to my field at this moment, and I am really glad to discover your blog site.
Splendid work. Thank you so much for this post. Interesting content.
Thanks a lot for this! ^^
this is a really good list!
thanks for taking the time in making it and sharing it
now everytime someone asks a question related to B&W coloring I will refer them to this list
thanks again! +mems
I am not sure why alot of these CSS3 / HTML5 sites are targeting only Chrome/Safari/Firefox, and maybe Opera. IE9 works perfectly fine with CSS3 and HTML5 however web devs still code for browser specific effects… That truly sucks.
@Bleepzter, this article was published on the 3rd of Feb, IE9 didn’t have its public release until March 14th
Actually, Opera can’t handle half of the above examples, and even then most of them don’t handle CSS transformations such as movement, scaling and rotation.
Here’s hoping for a fix to this issue for all Opera users.
age of heart attack decreased with each passing day, he said.
werffsdafasdasdfawewef
wow its fantastic css .. i like it i wanna try ..;-)
thank u
jual rumah jakarta selatan
Hello Friend ,
Nice Posts.
I am here to know about the web designing, such as how to add two different images but make sure partition should invisible.
one word, “AMAZING”.
Hello ! Mine is probably not so amazing, but you could try my Tetris only built with CSS3 animations (no javascript and no pictures).
http://www.geoffray.be/lab/tetris-css3
This is verry good
Is there any option to download…?
I have also created a tutorial on CSS3 transitions, http://www.coderscab.in/2011/07/two-level-menu-using-css3-transitions/
It is not as good as other tuts available but still, as my first try it will be good for CSS newbies.