Like Quertime on Facebook!

40 Cool and Amazing CSS3 Animation Demos

Filed under Web Design

With the introduction of CSS3, it has brought many cool new features. And one of the most fun and amazing features is CSS animation, demonstrating the possibilities of the CSS3 transform and transition property. Here’s a compilation of 40 CSS animated demos that let you discover the possibility and usability of the CSS3. They all look cool and some of them can be used as Javascript alternatives and applied into web design to make it more interesting. To view these animations, you are required to have WebKit browsers like Safari and Chrome.

css3_spiderman_cartoon_best_css3_animation_demos

Animated AT-AT Walker from Star Wars
A CSS3 animation of an AT-AT Walker from The Empire Strikes Back.
animated_at_at_walker_from_star_wars_best_css3_animation_demos

The Letter-Heads
Experience interactive shadow-art in your browser.
the_letter_heads_best_css3_animation_demos

Rofox CSS3 Animation
Little spaceship lands on planet. Little spaceship takes off from planet.
rofox_css3_animation_best_css3_animation_demos

Battlefield CSS3
A short movie with lots of explosions and gunshots.
battlefield_css3_best_css3_animation_demos

Can Haz Ur Cursor?
Please, feed the Cursor Monster.
can_haz_ur_cursor_best_css3_animation_demos

The Planetarium
A CSS3 journey through the Solar System.
the_planetarium_best_css3_animation_demos

Type Rain
Nice little rain simulation built using DIVS and CSS Transforms (Makes browsers cry).
type_rain_best_css3_animation_demos

Dynamic PNG Shadow Position and Opacity
Drag the light-bulb or the logo to see the dynamic PNG shadow position and opacity.
dynamic_png_shadow_position_and_opacity_best_css3_animation_demos

Pure CSS3 Bokeh Effect
This is a pure CSS3 bokeh effect. With some help from jQuery, you can add some randomness in colour, size and position for the effect.
pure_css3_bokeh_effect_best_css3_animation_demos

ShineTime
A jQuery and CSS3 gallery with animated shine effects.
shinetime_best_css3_animation_demos

CSS Dock
An experiment mimicking the Dock of OS X using only CSS. Labels, animations, reflections and indicators… it’s all there.
css_dock_best_css3_animation_demos

Dulla
Prepare your mind! Use your brain and save Dulla. Show the world how clever you are.
dulla_best_css3_animation_demos

CSS3 Animation – Just for Fun
This demonstration just needs you to keep the mouse moving over the image in most browsers.
css3_animation_just_for_fun_best_css3_animation_demos

Infinite “Zoom-In” Effect
This demo applies webkit and moz keyframes style to animate 26 images to produce an infinite “Zoom-In” effect.
infinite_zoom_in_effect_best_css3_animation_demos

CSS Tricks
A 3D body tracking CSS animation done with Kinect.
css_tricks_best_css3_animation_demos

Our Solar System
An experiment with CSS3 border-radius, transforms and animations.
our_solar_system_best_css3_animation_demos

CSS3 Duff Roll
Mmmmmm….Homer would love the never ending supply of beer.
css3_duff_roll_best_css3_animation_demos

The Expressive Web
This example uses CSS3 animations to animate the character and background.
the_expressive_web_best_css3_animation_demos

Walking with CSS
A fully animated figure using nothing by CSS animations.
walking_with_css_best_css3_animation_demos

Creative CSS3 Animation Menus
The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations.
creative_css3_animation_menus_best_css3_animation_demos

Wonder Webkit
A demo of CSS3 Matrix 3D transformations with JavaScript Matrix library.
wonder_webkit_best_css3_animation_demos

CSS Zoetrope
Bridging old school moving pictures with new school CSS animation.
css_zoetrope_best_css3_animation_demos

Colorful Clock With CSS and jQuery
This colorful CSS and jQuery clock helps you to keep track of those precious last seconds of the year.
colorful_clock_with_css_jquery_best_css3_animation_demos

jQuery DJ Hero
A simple CSS3 and jQuery proof of concept experiment showing DJ turn tables that you can scratch and spin.
jquery_dj_hero_best_css3_animation_demos

CSS Text Shadow
Move your mouse over the box to cast a shadow with the spotlight.
css_text_shadow_best_css3_animation_demos

Old School Clock
Old School Clock with CSS3 and jQuery.
old_school_clock_best_css3_animation_demos

Elastic Thumbnail Menu
Magnify menu items when they are hovered over.
elastic_thumbnail_menu_best_css3_animation_demos

3D CSS Cube
Use arrow keys to rotate the 3D CSS cube.
3d_css_cube_best_css3_animation_demos

Multiple 3D Cubes (Slide In/Out)
3D cubes built and animated with CSS
multiple_3d_cubes_best_css3_animation_demos

Awesome CSS3 Lightbox Gallery
Drag the pics around to share them.
awesome_css3_lightbox_gallery_best_css3_animation_demos

Animated Buttons with CSS3
The idea is to create some animated link elements with different styles, hover effects and active states.
animated_buttons_with_css3_best_css3_animation_demos

Dynamic Stacking Cards
Use CSS3 to create a dynamic stack of index cards.
dynamic_stacking_cards_best_css3_animation_demos

Isocube
Isocube can load images on one side.
isocube_best_css3_animation_demos

CSS 3D Meninas
This classic paint “The Maids of Honour (Las Meninas)” with CSS pseudo-3D/parallax effect.
css_3d_meninas_best_css3_animation_demos

Contextual Slideout Tips With jQuery & CSS3
The idea is to create an easily configurable set of contextual slideouts.
contextual_slideout_tips_best_css3_animation_demos

Wicked CSS3 3D Bar Chart
When hovering, these bars will grow to the appropriate size.
wicked_css3_3d_bar_chart_best_css3_animation_demos

Interactive Image Vamp up with CSS3, jQuery and PHP
An online application for giving some funny touches to an image.
interactive_image_vamp_up_with_css3_best_css3_animation_demos

CSS3 Graph Animation
This animation lets you show a cool graph in your site.
css3_graph_animation_best_css3_animation_demos

Space CaCSS
This demo shows animated CSS3 background patterns.
space_cacss_best_css3_animation_demos

Hover Effects with CSS3
The demo shows thumbnail hover effects with CSS3 transitions.
hover_effects_with_css3_best_css3_animation_demos

Author: Jules, Quertime Editorial

Founder of Quertime.com. Connect with him on Facebook, follow him on Twitter or circle him on Google+.

Tags: , , ,

Comments are closed.