CSS3 has changed many of the older techniques, and has made everything more sophisticated and easier. It helps in making really advanced, effecting and eye-catching deigns for your website. CSS Transitions & Animations make the experience even better, with all the awesome effects. They help you make it even more interactive, beautiful and fun. These effects are especially impressive when it comes to hovering over or on clicking. So today we have a list of some Amazing CSS Transitions & Animations techniques. All these techniques allow creating enjoyable and practical effects for enhancing the overall look of your website. Please note that some of these techniques also use HTML5 and JavaScript, in addition to CSS3.

Today we are presenting a article on CSS3 Animation featuring best awesome functions. CSS3 is full of useful features, some of which are less searched.

Paperfold CSS

Paperfold CSS is a really awesome folding effect for all the hidden comments by Felix Niklas. It takes a DOM element, divides it into pieces and sets them like a folded paper in 3-D space. Interesting effect, right?

Animated popover of profile box

Create an animated profile popover menu with CSS transitions.

CSS 3D Lighting Engine Photon

The JavaScript library allows adding minimalistic lighting effects to DOM elements in 3D utilizing the WebKitCSSMatrix object.

CSS3 scroll effects

This one is a fabulous library of many different scrolling effects like curling, waving, flipping, flying, skewing and helix, made utilizing CSS3 and sometimes JavaScript for adding life to the scrolling behavior.

3D Thumbnail Hover Effects With CSS

As the name suggests, this one lets you create a 3D thumbnail hover effects using CSS 3D transforms. Its code is quite long, but the effect is really nice.

CSS3 bitmap graphics

Bitmap graphics is rendered with CSS. It has no pictures, no canvas, no data URIs and no extra markup. These pixels are made using the CSS gradients, and the size fits to the pixel’s boundaries.

Maintaining CSS style states with ‘infinite’ transition delays

The demo given here lets you view how moving the character around with the D-pad is possible, and see that it always keeps its position after you stop moving. It does not utilize any JavaScript. This effect is achieved using a virtually infinite transition delay, so that the CSS rules should not come back to their original state. It would stay in a transition and will move on holding down a button.

Beercamp: An Experiment With CSS 3D

Here you can get information about an experimental CSS 3D popup which turned out to be quite well. It was created to see the limits of SVG and CSS 3D transforms.

Slide In Image Boxes

It allows producing the ‘slide in’ effect for boxes when you hover over them. This effect adds life to the plain boxes.

Interactive CSS3 lighting effects

These are some really cool lighting effects with 3-D transforms, CSS gradients and masks. You can achieve the cast shadow effect by using the box shadows and transforms.

Animation on Apple’s page

Did you like the animation on Apple’s Web page for the iPhone 4S? If so then you should check this out as here John B. Hall explains the CSS animation on that page.

Experimental animations for image transitions

Here you can get details about the experimental 3-D image transitions using CSS3 animations and jQuery. CSS3 transforms alone were utilized.

CSS 3-D clouds

This allows producing 3-D- clouds using CSS3 transforms and some JavaScript.

Spin icons with CSS3

You can create the spinning social icons effect on hovering over them, using transform and transition.

CSS3 dodecahedron

This one is a pretty dodecahedron experiment. It can be made utilizing the CSS Transforms and a small JavaScript snippet.

Covers: A JS / CSS Experiment

The name clearly states that this one was an experiment. It lets you create a covers with music song, stylesheet and beat detector utilizing CSS3 and JavaScript! The product is quite cool and you can use it any way you want.

Scroll the Z Axis with CSS 3D Transforms

Here you can learn creating the z-scroll effect in very detailed steps.