From IT Skills
Jump to: navigation, search

very good support

also called as Declarative

10 principles for smooth web animations[edit]

tweening[edit]

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

Tinting[edit]

When hiding things, I can usually just set the opacity to 0

hardware accelerated CSS[edit]

gpu-animation-doing-it-right[edit]

  • 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
    • We could also animate via JavaScript, but we’d have to add transform: translateZ(0) or will-change: transform, opacity first in order to ensure that the element gets its own compositing layer.

Subcategories

This category has only the following subcategory.

C

Pages in category "Css animations"

The following 2 pages are in this category, out of 2 total.