Now the question arises why animation?
Animation or interactivity helps to attract user’s attention, it helps to narrate the product story and yes it is also fun looking at those transitional effects.
“By offloading interpretation of changes to the perceptual system animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chances the user is surprised.”
Scott e.Hudson and john T.Stasko(1993).
But animation is quite difficult on web in respect to other media, the reason is we have to make it compatible in different browser (The devils IE8 and its predecessors too) and different devices (mobiles, tablets, desktops). Some of the feature like canvas is not yet supported in IE8, iOS doesn’t allow flash, and we can’t use lots of images and because it will reduce the site speed.
JS and CSS3 are usually two methods of adding animations on the web. Let’s see how we can use them because people are usually confused over their usage in web.
Animate with CSS3
IN 2007, Webkit introduced animation in CSS, that changed the whole scenario of the web animation.
Below is some CSS that will move an element 150px and 120px in both the X & Y axes in 500ms.
As you start adding more cases it will become more complex.
If you are using jQuery in your project already, you will likely benefit from sticking with it and using the animate() functions.
- If we have some simple effects like color changes on hover, changing dimensions of an element, simple fading effects, or combination of these types of simple effects, we can use CSS3.
- Tween JS