...

/

Introduction to CSS Animations

Introduction to CSS Animations

An introduction to CSS animations and how it differs from CSS transitionst.

CSS animations, also known as keyframe animations, are animation methods to animate an element from one style configuration to another. CSS animations, unlike CSS transitions, can have intermediate steps using a set of keyframes to indicate the styles to be applied at each step.

Press + to interact

CSS animations consist of two parts:

  • A configuration for the animation itself (i.e. duration, iteration, delay, direction, fill mode, and timing function).
  • A set of keyframes indicating the styles to be applied
...