Comparison of Animation Technologies[edit | edit source]

Declarative[edit | edit source]

Css animations‎ and high-level libraries

Imperative[edit | edit source]

The main pro of imperative animations happens to also be its main con: it’s running in JavaScript on the browser’s main thread.

On the one hand, creating a simple and reusable animation via a CSS transition or animation is very easy; on the other, creating complex animation with fancy trajectories is much easier with JavaScript animation than with CSS. Also, JavaScript is the only way to interact with user input. Css animations have a very important feature: It works entirely on the GPU. You can use JavaScript animations together with requestAnimationFrame and 3D transforms to trigger hardware compositing. You get the same level of performance as with CSS. However, this won’t work in JavaScript-free environments, such as some banner ad sandboxes.

Canvas[edit | edit source]