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.
Animate with JavaScript
Writing Javascript is quite difficult. Below is the JavaScript that you would need to write to recreate the CSS transition we discussed earlier.
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.
Both CSS3 and Javascript have their pros and cons. We can code some basic animation either through Javascript or CSS3 but it is important to know which one should be used when:
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.
But if we want more controls over animation like images slider, or calling animation on some custom events, effects on mouse movement, parallax effect etc. we should use Javascript.
Instead of using core javascript we should use javascript framework like jQuery that can ease our task. These days we have lots of javascript libraries available to ease our animation process. Some of them are-
How your site feels and looks to its visitors is a huge determinant of the user experience (UX) offered on it. Site developers and designers leave no stones unturned to make their website’s style and design line up with its utility and functionality to give it a comprehensive look and make it practical. The most crucial decision amongst this is the successful utilization of CSS and its features.
Since its previous version, CSS3 has taken a giant leap and emerged as one of the most brilliant technological advances in the web design industry. With CSS3, internet browsers locally produce plenty of styling effects that were once just feasible through inventive HTML hacks and editing software like Photoshop. What’s extraordinary about CSS3 is that it’s exceptionally amazing at lessening the requirement of pictures and code that you previously had to put on your site as a significant aspect of your structure. This implies decreased server requests and loading time for your website. This article talks about some of the most striking CSS3 features, which will help you to augment the feel and aesthetics of your project effortlessly
Features of CSS3
1. Advanced Animations
We can utilize both Transition and Animation when it is required to change a component starting with one state moving/transitioning onto the next. The thing that matters is that animation can be comprised of numerous states, giving command over its animation. These animations are now available and compatible with all browsers. There are two different ways to make CSS animations. The first is simple; it is done through animating the progressions of CSS properties with the transition assertion. With transitions, you can make float or mouse down effects, or you can trigger the animation by changing the style of a component with JavaScript.
The second route for characterizing animations is more complex- it includes the portrayal of specific moments of the animation along with the code. This enables you to have recurring animations that don’t rely upon user activities or JavaScript to get activated.
2.Multiple Backgrounds & Gradient
With multiple backgrounds, creators can accomplish extremely intriguing impacts. They can stack various pictures as backgrounds of a component. Each picture (or layer) can be moved and animated effortlessly. CSS3 features also include the provision of having gradients in the background. Gradients enable website specialists to make smooth advances between hues without turning to pictures. CSS gradients likewise look extraordinary on retina displays, since they are created the moment the page loads. They can be straight or outspread and can be set to repeat.
3.Multiple Column layout
This CSS3 feature incorporates properties to enable web designers to display their content in multiple sections with alternatives like column-width, column-gap, and column-count. Column-based formats were previously hard to pull off in CSS. It normally included utilizing JavaScript or server-side processing that parts the content into various components. This is superfluously convoluted and wastes valuable development time. Luckily, presently there is a route around this by utilizing the CSS columns rule.
4.Opacity
This property can make components more transparent. You could approach setting the opacity of a picture in a picture manager or photo editing software, and afterward, save it as a .png or .gif document with opacity enabled. Or on the other hand, you could simply get this done with a single line of code in CSS. It’s up to you. The opacity ranges from 0 (totally transparent) to 1 (totally opaque).
5.Rounded Corner:
Greatly utilized by the social media giant Twitter, this CSS3 feature is already very renowned on the web. Rounded corner components can tidy up a site, however, making a rounded corner requires a web designer to compose a great deal of code. Modifying the stature, width, and location of these components is an endless task in light of the fact that any adjustment in content can break them. CSS 3 tends to simplify this issue by presenting the rounded corner property, which gives you the equivalent rounded corner impact, and you don’t need to compose all the code. Truly, rounded corners simply look more appealing and easy to use than square boxes. The best part currently is, you can apply this effect to HTML components with CSS3. That is the reason why you’ll discover rounded corners all over the web.
6. Selectors
Selectors enable the web designer to choose on increasingly precise degrees of the website page. They are basic pseudo-classes that perform halfway-matches to assist in coordinating with crediting and trait esteems. New selectors focus on a pseudo-class to style the components focused on the URL. Selectors likewise incorporate a checked pseudo-class to style checked components, for example, checkboxes and radio buttons.
CONCLUSION
Cascading Style Sheets Level 3 (CSS3) is a version of the CSS standard utilized in the styling and designing of Web pages. CSS3 features fuse the CSS2 standard with certain progressions and upgrades. CSS3 is a fantastic asset for Web creators. From the time CSS3 has been presented, there has been a superior control over the exhibition of content on a site. Regardless of where we choose to utilize our programming capacities, it will be seen that web advances are really basic and important to take advantage of on each stage. Give CSS3 a try and utilize it in case you’re making a site. Mess around with it. You’ll find it very intriguing to work with its cutting edge features while also sparing yourself a great deal of time that you would have otherwise spent to make precisely the same thing in a photo editing software.
With a new feature of CSS3’s modularized specification, it has further eased out the process for browser developers as it permits them to support incremental modules without doing any heavy modifications or refactoring of the browsers’ codebases. This concept of modularization makes it much simpler and faster to implement individual CSS3 modules.
