1.6 KiB
1.6 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;
Specify the Speed Curve of the Transition
You can specify a speed curve on an element in transition property.
transition: height 2s linear;
or the property transition-timing-function
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