Change a Transition's Speed with Timing Functions6:59 with Guil Hernandez
The speed of a transition can vary over its duration. The speed can accelerate and decelerate rapidly, or slowly, all based on a timing function we set. Timing functions are often called easing functions because they gradually set the pace of a transition to produce a more realistic transition effect.
- transition-timing-function - MDN
- Pure CSS Questionnaire – with easing
- Pure CSS Questionnaire – with no easing
- When we create a CSS transition, the transition follows an acceleration curve that has a set of time intervals.
- These intervals can speed up or slow down a transition.
- A timing function establishes the acceleration curve and defines the intervals where a transition speeds up and slows down.
- The default timing-function the browser applies to your transition is
- Each timing function keyword value is a shorthand for a more complex timing function created by a cubic bézier curve.
Common timing function keyword values
These keyword values determine what happens in between the beginning and end of a transition.
- ease - Starts gently, then speeds up
- linear - Maintains a linear motion, at a constant speed with no easing
- ease-in - Starts gradually and stops suddenly
- ease-out – Starts suddenly, then slows down at the end
- ease-in-out – Starts and stops gradually
You need to sign up for Treehouse in order to download course files.Sign up