Custom Timing Functions with cubic-bezier()6:43 with Guil Hernandez
Timing functions get a whole lot more exciting once you add CSS transforms and custom timing functions into the mix. You'll learn how to create complex timing functions that accelerate and decelerate transition speeds, with cubic-bezier().
transition-timing-functionkeyword value is equivalent to a specific
cubic-bezier()you can dramatically change the speed of a transition.
cubic-bezier()creates a timing curve that accelerates and decelerates transition speeds.
- In the
cubic-bezier()CSS function, the bezier curve is defined by four values.
- The four values create the start/end points and control points of the acceleration curve.
- You're not expected to come up with bezier curve values on your own.
- Tools like cubic-bezier.com help you experiment with bezier curves to create better easing effects.
- The steeper the curve, the faster the transition will be; the flatter the curve, the slower it will be.
- Move the start and end points of the curve outside the standard easing range to create a more dramatic timing function.
Using CSS transitions and transforms in your projects
- Keep them simple, subtle, and consistent.
- Your website shouldn't depend on them.
- The effects you create should always enhance your content, not distract from the message or functionality of your site.
- You shouldn't rely on transitions and transforms in order for your design to work.
You need to sign up for Treehouse in order to download course files.Sign up