1. Transform & animate CSS

Animations are a vital part of a good user experience. Subtle usage can make page designs more interesting and appealing, and also enhance usability and perceived performance.

Learning outcomes:

• Understand why CSS transforms and animation are needed.

• A caveat — overuse can negatively affect usability and accessibility.

• Common transforms — scaling, rotation, and translation.

• 3D transforms, and how 3D positioning/perspective is handled on the web.

• Transitions.

• Animations.

Resources:

• Using CSS transforms

• Using CSS transitions

• Using CSS animations