Transitions in CSS

在 CSS 中可define how an HTML element transitions between states

#transition-delay

Defines how long the transition has to wait before starting.

默认属性 transition-delay: 0s;

The transition will wait zero seconds, and thus start right away.

transition-delay: 1.2s;

You can use decimal values in seconds with the keyword s.

transition-delay: 2400ms;

You can use milliseconds instead of seconds, with the keyword ms.

transition-delay: -500ms;

You can use negative values: the transition will start as if it had already been playing for 500ms.

#transition-duration

Defines how long the transition lasts.

默认属性 transition-duration: 0s;

The transition will last zero seconds, and is thus instant.

transition-duration: 1.2s;

You can use decimal values in seconds with the keyword s.

transition-duration: 2400ms;

You can use milliseconds instead of seconds, with the keyword ms.

#transition-property

Defines which properties will transition.

默认属性 transition-property: all;

The element will transition all properties:

transition-property: none;

The element will transition no property: the transition is thus instant.

transition-property: background;

The element will only transtion the background property.

transition-property: color;

The element will only transtion the color property.

transition-property: transform;

The element will only transtion the transform property.

#transition-timing-function

Defines how the values between the start and the end of the transition are calculated.

默认属性 transition-timing-function: ease;

The transition starts slowly, accelerates in the middle, and slows down at the end.

transition-timing-function: ease-in;

The transition starts slowly, and accelerates gradually until the end.

transition-timing-function: ease-out;

The transition starts quickly, and decelerates gradually until the end.

transition-timing-function: ease-in-out;

Like ease, but more pronounced.

The transition starts quickly, and decelerates gradually until the end.

transition-timing-function: linear;

The transition has a *constant speed.

transition-timing-function: step-start;

The transition jumps instantly to the final state.

transition-timing-function: step-end;

The transition stays at the initial state until the end, when it instantly jumps to the final state.

transition-timing-function: steps(4, end);

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

#transition

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

Only transition-duration is required.

transition: 1s;

  • transition-duration is set to 1s
  • transition-property defaults to all
  • transition-timing-function defaults to ease
  • transition-delay defaults to 0s

transition: 1s linear;

  • transition-duration is set to 1s
  • transition-property defaults to all
  • transition-timing-function is set to linear
  • transition-delay defaults to 0s

transition: background 1s linear;

  • transition-duration is set to 1s
  • transition-property is set to background
  • transition-timing-function is set to linear
  • transition-delay defaults to 0s

transition: background 1s linear 500ms;

  • transition-duration is set to 1s
  • transition-property is set to background
  • transition-timing-function is set to linear
  • transition-delay is set to 500ms

transition: background 4s, transform 1s;

You can combine multiple properties with their own transition duration.