Web animations on large screen (MDN post)

Although John Hu had left mozilla, he had wrote a post before leaving. This post is a post that John Hu felt good. Please go to this URL to see the post:

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/Web_animations_on_large_screen

John Hu would suggest you to see the post at MDN's page.

 

A brief content of this post is here:

 

Animations are cool, especially on large screens, so Firefox OS on TV features a lot of smooth, subtle animations to enhance user experience. This article provides guidance for creating effective animations that work well on large screens.

Graphics performance basics

Before starting to code, lets think about graphics performance at a basic level. According to App performance validation, a UI change may trigger a reflow (relayout), a repaint, and a composition. If we want graphics performance to be better, we should trigger them as little as possible.

There are various ways to create animations. For example, when moving a box from left (100px) to right (300px), we may use left, margin, padding, border, or transform to do so. According to CSS Triggers, we should just use transform because:

  1. left, margin, and padding trigger reflow, repaint, and composition;

  2. border triggers repaint and composition;

  3. transform only triggers composition.

The following Codepen is available if you want to perform this test yourself: CSS animation with different properties. try turning on the Firefox FPS meter before running each animation (enabled via the layers.acceleration.draw-fps pref in Firefox's about:config.