Keyframe Animation

Watch

Overview of CSS Animation (YouTube)

3 Modules

CSS Animation encompasses three concepts:

  • (2D and 3D) Transforms

  • Transitions

  • Keyframe Animation

Overview

Pros

  • Animates HTML elements including SVG

  • No required plugins like Adobe Flash or dependencies

  • Degrades gracefully if not browser not supported

Cons

  • Requires JavaScript for click events or other non-CSS events

  • Cumbersome to write complex “multi-scene” animations e.g. different timing and delays

  • No standard timeline, scrubber, or other Adobe After Effects

PreviousTransitionsNextJS via GSAP Library

Last updated