pelicin › web › CSS

Transition

Transition CSS property defines the transition between two states of an element.

Different states may be defined using pseudo-classes like :hover or :active, or dynamically set using JavaScript.

CSS Properties

You can use commas to specify multiple transitions.

transition

Shorthand for transition-property, transition-duration, transition-timing-function, transition-delay.

div {
  transition: right 0.2s ease;
  transition: margin-right 4s, color 1s;
  /* <transition-property> <transition-duration> <transition-timing-function> <transition-delay> */
  transition: margin-right 4s ease-in-out 1s;
}

transition-property

Sets the CSS properties to which a transition effect should be applied.

Specify a CSS property (e.g. color), all, or none.

transition-duration

Sets the total duration for the transition to complete. (The default value is 0s, i.e. no transition.)

transition-timing-function

Sets the easing function to be used for the transition.

transition-delay

Sets the duration to wait before starting a property's transition effect when its value changes. (The default value is 0s, i.e. no delay.)

References