CSS transition Property

CSS transition property specifies the transition duration, delay, timing function, and property name to apply transition on an element in one declaration. The transition property is a shorthand of the following transition properties:

Hover over the box below to see the transition effect:

Hover Over Me!!!

Example:

div{
  width: 50%;
  transition: width 3s ease 0s;
}
div:hover{
  width: 90%;
}

Note: When declaring the transition property, always specify the transition-duration value. Otherwise, the transition will not be effective.


CSS Syntax

The transition property has the following syntax:

transition: transition-property duration timing-function delay|initial|inherit;

Property Values

The transition property accepts the following values:

transition-propertySpecifies the CSS property on which the transition will be applied.
transition-durationSpecifies the time duration that the transition will take to complete.
transition-timing-functionSpecifies the type of transition function.
transition-delaySpecifies the time that the transition will take before starting.
initialSets the transition property to its default value.
inheritInherits the transition property from its parent element.

General Info

Default Valueall 0s ease 0s
InheritedNo
JavaScript Usageelement.style.transition = “width 2s ease 0s”