The delay between frames is 10 ms here, which means 100 frames per second.

In most JavaScript frameworks it is 10-15 ms by default. Less delay makes the animation look smoother, but only if browser is fast enough to animate every step in time.

If the animation requires many calculations, CPU may get 100% load, and things become sluggish. In this case the delay can be increased. For example, 40ms gives 25 frames per second, close to the cinema standard which is 24.

`setInterval` instead of `setTimeout`

We’re using setInterval, not recursive setTimeout, because we want a frame once per interval, not *a fixed delay between frames.
See Understanding timers: setTimeout and setInterval for detail differences between setInterval and recursive setTimeout.

Example

For example, the element is visually moved by changing element.style.left from 0 to 100px. The change is done by 1px every 10ms.

Maths, the function of progress delta

The animation is a change of property over time, following the given law. In JavaScript animation, the law is implemented as delta function.

Different deltas make animation speed, acceleration and other parameters behave is a sheer variety of ways.

Mathematical formulas are usually used here. They may seem unfamiliar to people who only do web-programming and forgot school maths. But in this section we’ll browse most popular formulas and see how they work.

The examples animate movement, providing different delta.

Linear delta

function linear(progress) {
return progress
}

Graph:

Horizontal line is progress, vertical line is delta(progress).

We’ve seen it already. The linear delta makes animation proceed at fixed pace.

Because CSS transitions are still a draft, browsers use them in prefixed form.
Actually, there is no browser which supports bare "transition" without a prefix.

Limitations

CSS transitions are very limited comparing to JavaScript.

The limitations are:

We can set delta, called transition-timing-function, but CSS allows only cubic bezier curves here. And no values out of [0,1] interval.

Only CSS properties can be animated. But the good thing, multiple properties can animate at once.

Well, of course CSS is less powerful than JavaScript. But simple things should be done simply, right? So obviously, CSS animations can be useful.

Pitifully, no support from IE and draft stage of the standard is the reason of slow adoption of CSS transitions.

Optimization hints

Many timers cause CPU consumption.

If you want to run many animations at once, for example to show a bunch of falling snowflakes, manage them in a single timer.

Each timer causes a redraw. The browser is much more effective if there is a single redraw for all animations.

An animation framework usually has a single setInterval, and runs all frames on it’s tick.

Help the browser to render

The browser manages rendering tree, and elements depend on each other.

If the animated element is deep in the DOM, then other elements depend on it’s geometry and position. Even if the animation actually doesn’t shift them, the browser has to perform additional calculations.

To make the animation consume less CPU (and be smoother), don’t animate the element deep in DOM.

Instead:

Remove the animated element from DOM and attach it directly to BODY at the start. You’ll probably need to make it position: absolute and setup coordinates.

Animate it.

Put it back into the DOM.

The trick can fix shaky animation and save CPU.

On phones and pads, consider replacing JavaScript animation with CSS transitions, if it is running too slow.

Summary

The animation is done using setInterval with small delay, like 10-50ms. At every run, the function updates the element.

Actually, there is no restriction on “element”. Anything can be animated.

The generic animation framework accepts following parameters:

delay - the delay between frames.

duration - the total time for the animation.

delta - the function to calculate animation state at every frame. The functions can be modified by applying easeOut/easeInOut transforms.

step - the function which applies the animation state to the element.

Specific animations may accept other parameters: from, to etc.

If the animation runs slow, consider making the element absolute and using CSS transitions. Also try to handle many animations in single timer.