Use of internet is increasing day by day. According to a Survey in 2014, 40% of the population of the world is using internet. According to Cisco, in next five years the Global internet traffic is expected to increase thrice and hence it is important to give user a better user experience on the web to be in the competition. Animation is one of the method we can achieve that.
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.
And if we want to change the opacity to 0 to 0.9 then-
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
I hope this was helpful. I would like to hear your thoughts on this. Please share in the comments section below.
Thank you for reading. 🙂