47 Amazing CSS3 Animation Demos

on 2011-6-23 in 博文摘选 | 0 Comment
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

css347 Amazing CSS3 Animation Demos

Analogue Clock

analoguecss347 Amazing CSS3 Animation Demos

3D Cube That Rotates Using Arrow Keys

3danaloguecss347 Amazing CSS3 Animation Demos

Multiple 3D Cubes (Slide In/Out)

multiple3danaloguecss347 Amazing CSS3 Animation Demos

CSS3 Accordion

css3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Auto-Scrolling Parallax

autocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Isocube

isocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Image Gallery

imageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Matrix

matriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

7 Javascript-effect Alternatives Using CSS3

javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Image Hover Effects

css3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Turning Coke Can (Control With Scrollbar)

cokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

3D Meninas

3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Polaroid Gallery

polaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Space

Note: this _disibledevent=>spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Mac Dock

css3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Drop-In Modals

dropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Sliding Vinyl

slidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Zooming Polaroids

zoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Animated Rocket

animatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Poster Circle

posteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Morphing Cubes

morphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Falling Leaves

fallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Animated Polaroid Gallery

polaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Spotlight Cast Shadow

spotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Colorful Clock

colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Lightbox Gallery (Draggable)

css3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Elastic Thumbnail Menu

elasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Coverflow

coverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Snowflakes

snowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

jQuery DJ Hero

djsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Dynamic Stacking Cards

stackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Another Image Gallery

imagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Snow Stack (Control With Arrow Keys)

snowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Animated Pricing Column

animatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Slick jQuery Menu

slickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

CSS3

stickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

CSS Tabs Without Javascript

cssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Tab Menus Without Javascript

tabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

SVG Fisheye Menu

fisheyetabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Dynamic Presentation Without Flash

dynamicfisheyetabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Rotating Gallery

rotatingdynamicfisheyetabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Dropdown Menu

dropdownrotatingdynamicfisheyetabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Another Fisheye

fisheyedropdownrotatingdynamicfisheyetabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Frame-by-Frame Animation (Hover to Play)

css3fisheyedropdownrotatingdynamicfisheyetabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

Another Accordion

anothercss3fisheyedropdownrotatingdynamicfisheyetabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos

AT-AT Walker (No Flash or Javascript)

css3anothercss3fisheyedropdownrotatingdynamicfisheyetabcssstickyslickanimatedsnowimagestackingdjsnowcoverflowelasticcss3colorfulspotlightpolaroidfallingmorphingposteranimatedzoomingslidingdropcss3spacepolaroid3dcokecss3javascriptmatriximageisocubeautocss3multiple3danaloguecss347 Amazing CSS3 Animation Demos
Tags: 

延伸阅读

最新评论

发表评论