Picking the Faster Choice: CSS3 Animation or JS Animation?

[gihanrox123]

What is Animation?

 

Animation is the illusion of movement that is created by displaying a series of still images in rapid succession. When it comes to the world of computers, graphic software is used to create these illusional masterpieces.

If you are a techie, you should be familiar with the primary methods of creating animations on the web. The current trend has proven to be either CSS3 or JavaScript. The one you choose clearly depends on various requirements of the project that you are doing and its related effects.
With the ability create even the most basic animations, JS and CSS3 has their own pros and cons. Let’s check them out.

CSS3 Animations




Using CSS3 animations, developers are able to create animations that can replace animated images, flash animations as well as JavaScript animations in new and existing web pages. Basically what a CSS3 animation does is that it allows elements to gradually change from one style to another. As a developer you are able to change as many properties you want and as many times you want. Furthermore, you can even specify when the change will happen in percent, or use keywords ‘from’ and ‘to’ which represents the values 0% - 100%. 0% is the start of the animation while 100% is when the animation is fully complete.

Great CSS3 FREE Resources: Animate.css and Justin Aguilar CSS3 Animations

Here is a table that best describes the @keyframes rule as well as all the animation properties of CSS3.

Property  Description

@keyframes :
This specifies the animation
animation :
This sets all animation properties except the  animation-fill-mode and the animation-play-state  property
animation-direction :
This property specifies whether or not the animation should play in reverse on alternate cycles
animation-delay :
Specifies when the animation will start
animation-duration :
The property specifies how many seconds or milliseconds an animation will take to complete one cycle
animation-fill-mode :
Specifies what styles will apply for each element when the animation is finished or when it has a delay
animation-name
Provides you with the name of the @keyframes animation
animation-iteration-count
Gives the number of times an animation should be played
animation-timing-function :
Specifies the speed curve of the animation
animation-play-state :
Tells you if the animation is paused or running

 

With CSS3 animations, you can define the animation itself independently of the target element, and then use the animation-name property to choose the required animation. Did you know that CSS animations are still mostly vendor prefixed? -webkit- is used in Chrome, Safari, Safari Mobile, Opera as well as Android Browser. Firefox and Internet Explorer both ship without prefixes. There are many tools that will help you to create a prefixed version of the CSS you require while you can also write an unprefixed version in your source file.

Check out the Pros and Cons of CSS3

 

Advantages

• No more JavaScript or Flash files for showing animations, scaling and rotating images
  
  
• No more images are needed to round the border of buttons
  
  
• Increased productivity and maintainability
  
  
• Less JavaScript/HTML = Less downloadable bytes
  
  
• Less images and flash files = Less HTTP requests
  
  
• Page loads much faster
  
  
• Search Engines dig CSS3 (the use of real text allows you to obtain more visitors as opposed to flash files)
  

Disadvantages

• Compatibility issues with old and new browsers
  
  
• The need of prefixes since many properties do not have a proper syntax
  
  
• Constantly checking for property support
  

JavaScript Animations





When creating animations with JavaScript it becomes more complex when compared to CSS3 animations and transitions. But for a well experienced developer, JS provides significant power. JavaScript boasts of having the upper hand when it comes to performance and developers have proven it to be fast enough to build an intense 3D animation demo that is usually built on WebGL. JS is also fast enough to build a multimedia teaser that is usually built using After Effects or Flash and has the capability to build a virtual world that can only be built with canvas.

There are a number of optimizations that JavaScript based animations are capable of performing.

• Synchronizing the DOM
  
  
• Skipping style updating when updates are visually undetectable
  
  
• Caching property values across chained calls to minimize the occurrence of DOM querying
  
  
• Caching of unit conversion ratios across sibling elements in the same call
  

Here is a detailed list of the Pros and Cons of JavaScript Animation

Advantages

• Execution is carried out on the users processor instead of a web server
  
  
• Relatively easy to learn and consists of syntax that is close to English
  
  
• JS is relatively fast
  
  
• There is also extended functionality to web pages
  

Disadvantages

• Security issues such as exploitation of the user’s system
  
  
• There might be inconsistency in terms of functionality and interface since different layout engines render JavaScript differently
  

Since JS offers a wide variety of dynamic functions, it is safe to say that it is a favoured programming language by web designers. Here are some of the JavaScript frameworks that you can use for animation developing.

Processing.js
Ability to programme images, interactions and animations for the web without the use of Flash or Java applets
Pixastic
An experimental online photo editor
moo.fx2
Has the ability to modify CSS properties
Glimmer 
Can create interactive experience such as hover effects and rotating photo galleries
jsAnimbeta 
You can add impressive animations to websites with a lot of punch
Scripty2
A powerful and flexible framework that helps you to develop beautiful visual effects and user interfaces
script.aculo.us
This framework provides you with an easy to use cross browser interface
Raphaeljs
Helps you simplify your work with vector graphics on the web

JavaScript vs CSS3 Performance

You should know that CSS3 based animations are usually handled on a separate thread while the styling, painting, layout and JavaScript are executed on the browser’s main thread. This means that CSS3 based animations can keep going without being interrupted.

Points to Remember;

[*]Make sure that you use CSS3 animations when you have self-contained and smaller states for UI elements. You might end up using JS to control the states but the animations will be in your CSS.

[*]Always use JS when you need control over your animations and when using advanced effects such as bouncing, pause, stop, slow-down or rewind.

[*]If you want to animate with JavaScript then you can go with TweenMax while a lightweight solution would be TweenLite.

Both CSS3 and JavaScript have their own unique features while both provides users with a number of pros and cons. Give us your opinion on what you think helps you to be more efficient when developing a website with animations.



Read More: ceffectz