also called as Declarative
10 principles for smooth web animations
use the CSS transition property to automatically animate an element as it changes. This technique is also known as “tweening”—as in transitioning between two different values
When hiding things, I can usually just set the opacity to 0
- AVOID IMPLICIT COMPOSITING
- Try to keep animated objects as high as possible in the #z-index. Ideally, these elements should be direct children of the body element.
- You can give browser a hint that you’re going to use compositing with the will-change CSS property.
- you can effectively animate movement, scaling, rotation, opacity and affine transforms only
- REDUCE SIZE OF COMPOSITE LAYER
- USE CSS TRANSITIONS AND ANIMATIONS WHENEVER POSSIBLE