Smoother animations in CSS3

Animations in CSS3 are easy to create while Javascript makes it a little complex. Browser do its best to make animations smoother. The animation starts to lag when CPU have short memory left due to sometimes coding mistakes or low performance of system. Doing animations is quite easy with CSS3 but make sure to handle them or else it will lag system.

CPU Usage

Each and every process holds some memory in RAM, continuous working increases the memory in CPU and its usage starts to increase. When this CPU usage crosses boundary its starts to let all the process going on. Infinite animations and on load animations are main reasons of CPU usage because continuously CPU working causes CPU over usage.

To ensure smoother animations there are some tips to make less CPU usage and make your animations smoothly. Beside animations there are many more stuff going on in DOM. Each and every event which alter the DOM elements requires memory so by reducing the number of on load events we can eventually reduce a big load from CPU by letting those stuff happens when actually necessary like hover or click.

Site performance never depends on single problem there are many, like memory leaking, heavy loading plugins and big images.

CSS3 in CPU usage

@keyframes method of animation should be used for a finite time or interval, infinite increases CPU usage. Beside CPU there is GPU means hardware-acceleration, that is a feature in modified graphic cards and most of us are taking advantage of those. To render the GPU there are certain properties of CSS which could increase animation performance by triggering GPU.

Browsers that includes hardware acceleration are given below.

Yes	Yes	Yes	IE9 +	Yes

But they only perform hardware acceleration when they feel that it would benefit DOM, normal 2D transitions never accelerate hardware but 3D transforms are those included in turning GPU on. Doesn't matter want to use it or not, add them to any DOM element to initiate GPU. Simplest way to do that is to add translateZ(0) with all prefixes, this do not have any effect on element but it will start GPU.
That is a simple way I found till now to initiate GPU using CSS.

.foo {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

There is no exact way to do faster animation in Javascript but a plugin Velocity Js provides faster animations, it uses same API as jQuery but have faster results than jQuery. Velocity doesn't require jQuery to work it uses native Javascript.