Table of Contents
CSS3 can be effectively and ingeniously used to create awesome animations.
Now you don’t need to learn Flash or toil with animation kits to incorporate some tricks into your website. CSS3, with the help of JavaScript and jQuery, helps you create cool animation effects that enhance the quality of your website. So, stop using CSS only for formatting the web layout but get into some exciting work now!
CSS3 Clock Using jQuery
A simple animation that makes the second’s hand of the clock tick can be made by using a basic CSS3 feature called rotate. When this basic feature is combined with JavaScript frameworks (jQuery), the animation can be made quite easily.
Analogue Clock
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.
Spotlight Shadow Cast
Using the text-shadow feature of CSS3, the Spotlight Shadow Cast is a simple animation that runs on Safari, Chrome, Firefox 3.5 and Opera. A PNG image is used to create a spotlight and JavaScript is used to update the text-shadow type. When the mouse is moved over the box, the spotlight effect can be distinctly seen.
Buttons Created With CSS3
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.
Rotating Words with CSS3
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.
3D Cube That Rotates Using Arrow Keys
A cube that can rotate when the arrow keys are moved. Interesting, right? This animation trick can be called slightly crazy but very effective. JavaScript is used to detect key presses and intuitively move the cube accordingly.
Colorful rating system with CSS3
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.
Auto-Scrolling Parallax
When multiple background images are used on a single element along with the webkit-transition property, the Parallax animation is created. JavaScript is not used to create this animation.
Bokeh Effects
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.
Filter Effects CSS3
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.
Matrix
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.
Page Transitions
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.
Turning Coke Can
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.
Frame-by-Frame Animation
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.
Isocube
A 3D animation trick that can load images on one side and HTML buttons on the other.
CSS3 Accordion
This is a common animation which we come across in several websites. The accordion effect is used in CSS to achieve the desired results.
Audio Player with HTML5 and CSS3
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.
3D Meninas
This animation gives a pseudo-3D/parallax effect and can be innovatively used in several ways. JavaScript or Flash isn’t used and the coding is done in CSS3 and HTML.
7 JavaScript-effect Into One
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.
