Reference

Properties

• transition
• transition-behavior
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

At rules

• @starting-style

Interfaces

• CSSStartingStyleRule
• CSSTransition
  • transitionProperty property
• TransitionEvent
  • TransitionEvent() constructor
  • TransitionEvent.propertyName property
  • TransitionEvent.elapsedTime property
  • TransitionEvent.pseudoElement property
  • transitioncancel event
  • transitionend event
  • transitionrun event
  • transitionstart event

Guides

Using CSS transitions

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

Animating display

Transitioning to and from the none value of the discretely animated display property.

Transitioning a popover and transitioning a <dialog>

Examples of transitioning from @starting-style to final :popover-open and :open pseudo-class styles.

• interpolate-size property

• calc-size() function

• Intrinsic size glossary term

• CSS easing functions module:

  • <easing-function> data-type

• CSS animations module:

  • animation shorthand
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function

• CSS transforms module:

  • transform
  • transform-box
  • transform-origin
  • transform-style

• CSS scroll snap module:

  • scroll-snap-type
  • scroll-padding
  • scroll-snap-align
  • scroll-margin
  • scroll-snap-stop

Specifications

See also

• opacity
• visibility
• ViewTransition interface
• PageTransitionEvent interface