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

css3 clock

Analogue Clock

analogue clock

3D Cube That Rotates Using Arrow Keys

3d cube

Multiple 3D Cubes (Slide In/Out)

multiple 3d cubes

CSS3 Accordion

css3 clock

Auto-Scrolling Parallax

auto scrolling parallax

Isocube

isocube

Image Gallery

image gallery

Matrix

matrix

7 Javascript-effect Alternatives Using CSS3

javascript effect alternatives

Image Hover Effects

css3 clock

Turning Coke Can (Control With Scrollbar)

coke can

3D Meninas

3d meninas

Polaroid Gallery

polaroid gallery

Space

Note: this one is graphic intense and takes a while to load, but the result is crazy!

space

Mac Dock

css3 clock

Drop-In Modals

drop in modals

Sliding Vinyl

sliding vinyl

Zooming Polaroids

zooming polaroids

Animated Rocket

animated rocket

Poster Circle

poster circle

Morphing Cubes

morphing cubes

Falling Leaves

falling leaves

Animated Polaroid Gallery

polaroid gallery

Spotlight Cast Shadow

spotlight cast shadow

Colorful Clock

colorful clock

Lightbox Gallery (Draggable)

css3 clock

Elastic Thumbnail Menu

elastic thumbnail menu

Coverflow

coverflow

Snowflakes

snow

jQuery DJ Hero

dj hero

Dynamic Stacking Cards

stacking cards

Another Image Gallery

image gallery

Snow Stack (Control With Arrow Keys)

snow stack

Animated Pricing Column

animated pricing column

Slick jQuery Menu

slick jquery menu

CSS3

sticky notes

CSS Tabs Without Javascript

css tabs

Tab Menus Without Javascript

tab menus

SVG Fisheye Menu

fisheye menu

Dynamic Presentation Without Flash

dynamic presentation

Rotating Gallery

rotating gallery

Dropdown Menu

dropdown menu

Another Fisheye

fisheye

Frame-by-Frame Animation (Hover to Play)

css3 animation

Another Accordion

another accordion

AT-AT Walker (No Flash or Javascript)

css3 animation walker

249 Comments

1 11 12 13
  1. Houdas
    Mar 19, 2013 @ 3:45 am

    This is very cool, thanks. I began playing with CSS3 animations just couple of days ago and I already love it. So many possibilites!

    Reply

  2. Okeke Paul
    May 24, 2013 @ 7:57 am

    This is really crazy mehnn—– CSS3 is damn cool– i really like this, thanks so much i guess i have a lot to learn; if i have any question i bet i can always pop up here to ask— nice..

    Reply

  3. DymoLabels
    Jun 1, 2013 @ 4:04 am

    hi sir
    i really like your collection
    thanks for sharing
    keep it up

    Reply

  4. Ven0m
    Jun 10, 2013 @ 9:21 am

    Very impresive! Cool collection! Thanks for sharing!

    Reply

1 11 12 13

Leave a Reply