CSS transitions

{{CSSRef}} 

The CSS transitions module lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their easing function, duration, and other attributes.

Reference

Properties

• {{cssxref("transition")}} 
• {{cssxref("transition-behavior")}} 
• {{cssxref("transition-delay")}} 
• {{cssxref("transition-duration")}} 
• {{cssxref("transition-property")}} 
• {{cssxref("transition-timing-function")}} 

At rules

• {{cssxref("@starting-style")}} 

Interfaces

• {{domxref("CSSStartingStyleRule")}} 

Guides

• Using CSS transitions
  • : Step-by-step tutorial about how to create transitions using CSS. This article describes each relevant CSS property and explains how they interact with each other.

Specifications

{{Specifications}} 

See also

• The {{cssxref("interpolate-size")}}  property and {{cssxref("calc-size()")}}  function for enabling transitions to and from intrinsic size values.
• CSS animations module.