Optimizing CSS animations
Animating well is core to a great web experience. You should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and may lead to skipped frames. Declarative animations are preferable to imperative since the browser has the opportunity to optimize ahead of time. Basic List of Animatable Properties: CSS animations - Animatable Examples of Each Property Animated:
Explore and see cool things that are possible with CSS animations! High Performance CSS Animations
When designing animation for interaction, it’s important to consider that variables do change based on user input. The most common variable that requires flexibility is the animation-duration() — this is the amount of time that the animation takes to complete.
Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk. High Performance CSS Animations
Imperative vs Declarative Animations
The current status of animated properties on the web. Paul Irish’s deck on performance tooling. Antialiasing 101 We’re Gonna Need A Bigger API!