When it comes to transitions, their pacing can change the effect they give to the viewer. We may not always want them to start immediately, or maybe we don't want the speed of the change to remain constant from start to finish. The transition-delay and transition-timing-function properties will give us some control over these changes.
The transition-delay property delivers what its name states—it will delay the start of the transition. Its set value is expressed in numbers (whole or decimal) followed by the letter s for seconds. Since we're using the hover pseudo class, this means the transition will begin the given amount of time after your cursor hovers over the element.
|
<style> |
|
Move your cursor here and wait.
|
The other property, transition-timing-function requires a little more explanation. Its purpose is to change the speed of the transition at different stages—usually the beginning or end of the transition. There are several keywords to choose from, most of them with the word "ease" included. In these keywords, ease basically refers to either starting slow and easing into the transition, or slowing down and easing to the end of the transition. Look over the table below to see explanations of each keyword, and then check out the example afterward to see a couple of these keywords in action.
| linear | The speed for this transition will remain consistent throughout. |
| ease | This keyword will start slow, speeding up to fast in the middle, and then slowing back down to the end. This is the default value for this property. |
| ease-in | This keyword will start slow and speed up to normal by the middle. |
| ease-out | This keyword will start normal and slow down toward the end. |
| ease-in-out | This keyword starts and ends slow, but only hits normal speed in the middle. |
|
<style> |
|
ease Div1
|
linear Div2
|
