2.5 KiB
| title |
|---|
| Transition |
Transition
The transition property allows you to change property values smoothly (from one value to another), over a given duration.
transition: all 300ms;
Transition on Several Property Values
You can change multiples property values with transition property.
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
• transition-duration
• transition-property
• transition-timing-function
Delay
The transition-delay property defines the delay (in seconds) before the transition is played.
/* 2 seconds delay */
div {
transition-delay: 2s;
}
Duration
The transition-duration property defines the duration (in seconds) of the transition.
/* 2 seconds duration */
div {
transition-duration: 2s;
}
Property
The transition-property property defines the CSS property that will be affected in the transition.
/* 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.
/* 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)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
Syntax
transition: property name / duration / timing function / delay ;
Example
transition: width 2s linear 2s;