The transition-timing-function property specifies the speed curve of the transition effect. The values (or "keywords") for this property include:
The syntax for this transition effect is:
transition-timing-function: value;
The following example shows a variety of different speed curves that can be used for transitions. Hover over each <div> element, to see the different speed curves:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
#div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;} </style> <body> <div id="div1">linear: same speed from start to end</div><br /> <div id="div2">ease (default): slow, fast, slow</div><br /> <div id="div3">ease-in: slow start</div><br /> <div id="div4">ease-out: slow end</div><br /> <div id="div5">ease-in-out: slow start and end</div> </body> |
linear: same speed from start to end ease (default): slow, fast, slow ease-in: slow start ease-out: slow end ease-in-out: slow start and end
|
Note: There is no actual property named “timing-function.” There is the transition-timing-function and the animation-timing-function properties.
