--- title: Transition --- ## Transition The `transition` property allows you to change property values smoothly (from one value to another), over a given duration. ```css transition: all 300ms; ``` ### Transition on Several Property Values You can change multiples property values with transition property. ```css transition: width 300ms, height 2s; ``` ### Specify the Speed Curve of the Transition You can specify a speed curve on an element in transition property. ```css transition: height 2s linear; ``` or the property `transition-timing-function` ```css 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 #### More Information: * MDN Documentation: MDN * Easings reference: Easings