Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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().

Teacher's Notes
Video Transcript
Downloads

Resources

Video review

Each transition-timing-function keyword value is equivalent to a specific cubic-bezier() function.
With 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.

The timing functions we covered in the previous section get a whole lot 0:00

more exciting once you add CSS transforms and custom timing functions into the mix. 0:03

So now you're gonna learn how to create more complex timing functions using 0:08

the cubic-bezier function. 0:12

With cubic-bezier you can create all kinds of fun and interesting easing effects. 0:14

In the previous section you learned that each of the pre-defined 0:19

timing function key words is a shorthand for 0:22

a more complex timing function created by what's called a cubic-bezier curve. 0:25

If you read the descriptions for each key word you'll notice that 0:31

each description shows you that the key word is equivalent to a specific 0:34

cubic-bezier function containing all these funky number values. 0:39

So before we get into how cubic-bezier works, or 0:44

what these numbers even mean, let's take a look at some examples first. 0:48

I created a demo that shows you the types of easing effect you can create 0:52

with cubic-bezier. 0:57

Now, the top example uses the ease timing function the browser applies by default, 0:58

so the transition starts and stops gradually. 1:05

But with cubic-bezier you can change the speed dramatically. 1:09

For example, you can make a transition start slow. 1:13

Then quickly accelerate to its end position like in this example or 1:16

you can make a transition start fast then slow down in the middle, and 1:21

finally accelerate to the end like this. 1:25

Now this next 2 are some of my favorite easing effects. 1:28

So, here the transition begins at a constant speed. 1:32

Then it sort of overshoots the end position before stopping. 1:36

So it eases out and back in, making the motion appear more realistic. 1:40

And the last one is similar, but it uses anticipation in it's movement. 1:46

It pulls back at first, then eases out and back in. 1:52

So all these neat easing effects were created using the cubic-bezier 1:58

functions you see displayed above each example. 2:03

These functions define a timing curve called a bezie- curve that accelerates and 2:07

decelerates transition speeds. 2:13

If you've used the vector program like Illustrator or 2:15

Sketch, then you're probably familiar with bezier-curves. 2:18

You add a start and end point to create a straight line. 2:22

Then you can define exactly how the line curves by adjusting two control points. 2:25

In the cubic-bezier CSS function, the bezier-curve is defined by four values, 2:31

these values create the start and end point and 2:36

the control points of the acceleration curve. 2:40

Don't worry. 2:43

You're not expected to come up with bezier-curve values off 2:43

the top of your head. 2:46

That involves a lot of trial and error to get the easing effect you want. 2:47

Fortunately for us, there are lots of great tools 2:51

to help you experiment with bezier-curves and produce awesome easing effects. 2:54

For example, cubicbezier.com developed by CSS expert Lea Verou is a simple app for 2:59

creating, testing, and comparing easing functions with bezier-curves. 3:06

Visually, it looks similar to the bezier-curves you 3:10

would draw in Illustrator or Sketch. 3:13

So now I can click and drag these control points to start creating my 3:15

custom timing functions, So as soon as I move one of the control points, 3:20

the cubic-bezier values up top start to change. 3:25

These are the values I'm going to use in my CSS, 3:30

once I'm happy with the easing function I've created. 3:33

In a bezier-curve, the steeper the curve, the faster the animation will be. 3:36

So, for example, if I click Go, 3:42

you can see how the top animation moves much faster than the one below it. 3:45

Now the flatter the curve the slower it will be. 3:51

So if I flatten the curve and 3:54

click Go you can see the top transition moving a lot slower. 3:57

So the neat thing about this tool is that when you click Go, 4:05

you can preview the easing effect, and even compare yours to one of 4:09

the predefined timing functions, like linear, ease, and ease-in 4:14

I wanna create a more dramatic timing function by moving the start and 4:24

end points in the curve outside the standard easing range represented 4:29

by the top and bottom edges of this graph. 4:34

So I'll slide the first point, down and below the graph, 4:38

and the next point up and above the graph. 4:43

When I preview my function, 4:50

notice how it creates that motion with anticipation effect. 4:52

It pulls back then eases out and back in. 4:56

The initial pulling back motion happens 5:00

right here where the curve goes outside the range. 5:03

Then it accelerates and goes back outside the range to create that affect where 5:07

it overshoots the stop point Right, I'm happy with this effect. 5:13

So now I can simply click the Save button here and copy these values. 5:20

Or I can copy the full cubic-bezier snippet here and 5:26

paste it into my style sheet. 5:30

So, I'm going to paste it as the transition timing function value, for 5:35

my image transition. 5:40

All right, so let's take a look. 5:45

When I hover over one of the top images, cool, the custom timing function 5:48

gives the transitions a fun bouncy effect so know they feels a little more animated. 5:53

So now it's your turn to create your own custom function using 6:01

the cubic-bezier tool and adding them to the rest of the gallery transitions. 6:05

When using CSS transitions and transforms in your project, 6:12

be sure to keep it simple, subtle and consistent. 6:15

Although transitions and transforms can add to the overall visual design 6:19

of a site, your website shouldn't depend on them. 6:22

It's easy to get carried away with these effects. 6:26

They're fun to play around with, but 6:28

keep in mind that the effects you create should always enhance your content and 6:30

not distract from the message or functionality of your site. 6:33

In other words, you shouldn't rely on transitions and 6:37

transforms in order for your design to work. 6:40

You need to sign up for Treehouse in order to download course files.

Sign up