Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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().
Resources
Video review
- Each
transition-timing-functionkeyword value is equivalent to a specificcubic-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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up