Animation is a time-varying visual change that communicates meaning, such as confirming an interaction or showing that a response is pending. section 17.4 section 17.4.1
Smooth animation depends on the browser’s rendering work. Changes to opacity and transform can use separate paint layers and GPU acceleration, while will-change can signal an expected change when animations become choppy or flicker. section 16.3.1
A loading state for a Save button
A form can add an is-loading class when the user clicks Save. The button hides its label, disables the controls, and displays a rotating crescent created with a pseudo-element. The animation uses @keyframes to rotate the crescent from 0deg to 360deg, repeating every 0.5 seconds while the server response is pending. section 17.4.1
Figure 16.12 The three stages of the rendering pipeline
Use the rendering-pipeline figure to trace how animated changes move through layout, painting, and compositing before appearing on screen. section 16.3.1
