Transition – CSS


title: Transition

Transition

The transition property allows you to change property values smoothly (from one value to another), over a given duration. For example the code below sets the transistion time to 300 milliseconds.
“`css
transition: all 300ms;

### Transition on Several Property Values You can change multiples property values with transition property.

css
transition: width 300ms, height 2s;

## Sub-Property To create a CSS transition, we have different sub-properties for the transition property in CSS : • `transition-delay`<br> • `transition-duration`<br> • `transition-property`<br> • `transition-timing-function` ### Delay The `transition-delay` property defines the delay (in seconds) before the transition is played.

css
/* 2 seconds delay */

div {
transition-delay: 2s;
}

### Duration The `transition-duration` property defines the duration (in seconds) of the transition.

css
/* 2 seconds duration */

div {
transition-duration: 2s;
}

### Property The `transition-property` property defines the CSS property that will be affected in the transition.

css
/* The transition will be on the width property */

div {
transition-property: width;
}

### Timing-function The `transition-timing-function` property defines the speed of the transition.

css
/* The transition speed */

div {
transition-timing-function: linear;
}

#### Different values of `transition-timing-function` • `ease` - specifies a transition effect with a slow start, then fast, then end slowly (this is default)<br> • `linear` - specifies a transition effect with the same speed from start to end<br> • `ease-in` - specifies a transition effect with a slow start<br> • `ease-out` - specifies a transition effect with a slow end<br> • `ease-in-out` - specifies a transition effect with a slow start and end<br> • `cubic-bezier(n,n,n,n)` - lets you define your own values in a cubic-bezier function ## Syntax ### Transition Delay Setting a transition delay determines when the transition will start.

css
transition-delay: 1s;

### Transition Shorthand

css
transition: property name / duration / timing function / delay ;

#### Example

css
transition: width 2s linear 2s;
“`

More Information:

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.