transition

Introduction

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Example

Syntax

/* Apply to 1 property */
/* property name | duration */
transition: background-color 4s;

/* property name | duration | delay */
transition: opacity 4s 1s;

/* property name | duration | easing function */
transition: background-color 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: background-color 4s ease-in-out 1s;

/* Apply to 2 properties */
transition:
  background-color 4s,
  opacity 4s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Clear all transition animation.*/
transition: none;

Formal definition

Initial value	empty value
Applies to	all elements
Inherited	no
Animatable	no

Formal syntax

transition: <transition-property> || <transition-duration> ||
  <transition-timing-function> || <transition-delay>;

Transition Event

Transition Event

Compatibility

LCD tables only load in the browser

#transition

#Introduction

#Example

#Syntax

#Formal definition

#Formal syntax

#Transition Event

#More

#Compatibility

transition

Introduction

Example

Syntax

Formal definition

Formal syntax

Transition Event

More

Compatibility