# CSS Transitions

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

# Transition Properties

There are four properties to the CSS Transition property: transition-property, transition-duration, transition-timing-function, and transition-delay.

.element {
  transition-property: background;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  transition-delay: 0.5s;
}

# transition-property

Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.

Default value: all

# transition-duration

Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.

Default value: 0s

# transition-timing-function

Specifies the timing function to use during the transition. Timing functions are used to determine the rate of the transition over the duration. For example, does the transition happen quickly at the beginning and slow down at the end.

Default value: ease

# transition-delay

Defines how long to wait between the time a property is changed and the transition actually begins.

Default value: 0s

# Shorthand Usage

The transition property can be used as a shorthand for the transition properities. Order does not matter, but the first time value given will be applied to the transition-duration.

.element {
  transition: color 1s ease-out 1s;
}