CSS transitions have four configurable properties to customize the animation:

  • transition-duration: This specifies the duration of the transition in either seconds or milliseconds.

  • transition-delay: This specifies the wait time before the transition is executed in either seconds or milliseconds.

  • transition-timing-function: This specifies a function to determine how the intermediate transitions are calculated. Think of this as the ability to control the acceleration and deceleration of our animations as they’re being executed.

  • transition-property: This specifies the CSS properties the transitions are applied to. This lets us apply the transition exclusively to a subset of properties without affecting other property changes.

Get hands-on with 1200+ tech skills courses.