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

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

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

the cubic-bezier function.

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

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

timing function key words is a shorthand for

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

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

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

cubic-bezier function containing all these funky number values.

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

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

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

with cubic-bezier.

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

so the transition starts and stops gradually.

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

For example, you can make a transition start slow.

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

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

finally accelerate to the end like this.

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

So, here the transition begins at a constant speed.

Then it sort of overshoots the end position before stopping.

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

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

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

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

functions you see displayed above each example.

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

decelerates transition speeds.

If you've used the vector program like Illustrator or

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

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

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

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

these values create the start and end point and

the control points of the acceleration curve.

Don't worry.

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

the top of your head.

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

Fortunately for us, there are lots of great tools

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

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

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

Visually, it looks similar to the bezier-curves you

would draw in Illustrator or Sketch.

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

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

the cubic-bezier values up top start to change.

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

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

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

So, for example, if I click Go,

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

Now the flatter the curve the slower it will be.

So if I flatten the curve and

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

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

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

the predefined timing functions, like linear, ease, and ease-in

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

end points in the curve outside the standard easing range represented

by the top and bottom edges of this graph.

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

and the next point up and above the graph.

When I preview my function,

notice how it creates that motion with anticipation effect.

It pulls back then eases out and back in.

The initial pulling back motion happens

right here where the curve goes outside the range.

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

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

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

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

paste it into my style sheet.

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

my image transition.

All right, so let's take a look.

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

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

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

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

When using CSS transitions and transforms in your project,

be sure to keep it simple, subtle and consistent.

Although transitions and transforms can add to the overall visual design

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

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

They're fun to play around with, but

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

not distract from the message or functionality of your site.

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

transforms in order for your design to work.