Table of Contents
CSS3 can be effectively and ingeniously used to create awesome animations.
Yet another clock that can be run on Chrome, Safari, Opera, Safari and Internet Explorer. To make this clock work, four images are created, that of a clock face, three transparent hands (for seconds, minutes and hour). The hand’s rotation is made possible with two webkit specific CSS properties- webkit-transition and webkit-transform.
Social media buttons and other cool buttons are a part and parcel of any dynamic website. Using features such as gradients, shadows etc, cool buttons can be created without using Photoshop.
It is another cool feature that uses a typographic effect. Certain words in a sentence are coded using CSS3 giving the required animation to the text.
A rating system where each circle has a different color and when the mouse is hovered around it, the effect can be seen. CSS is used to define the properties of the rounded corners while jQuery is used to handle the events.
Randomness with color, size and position helps you get the Bokeh effect. Bokeh is a photographic term which means ‘blur’. To create this effect, you have to take the help of jQuery.
You can create an image portfolio and use it to highlight the image when the mouse is hovered over it. This animation trick toggles between the states of items of a specific type.
If you are thinking the name rings a bell, you are bang on correct! Yes, this animation is a reminiscent of the movie ‘Matrix’. You have to use WebKit Nightly to make this animation work.
Many animations speak of image transitions but this animation effect works on page transition. The transition is smooth and attractive and can be vastly used.
If there is one cool animation, this is definitely that. The coke can can be turned using the scrollbar and the effect used is called CSS Paper Bird effect.
To play the frame-by-frame animation you need to click on the image. The faster you click the better the animation you will notice and vice versa. Alternatively, some browsers also allow you to hover the mouse over the image to play the animation.
A 3D animation trick that can load images on one side and HTML buttons on the other.
This is a common animation which we come across in several websites. The accordion effect is used in CSS to achieve the desired results.
Not so much an animation as a utility, inserting an audio clip has several advantages. The MediaElement.js is used along with CSS3 and HTML5 to create this effect.
This is one effect which gives seven animations all at once. Fade block, pulsate block, nudge, expand, spin, bounce and accordion are the seven effects.