Preview
Video Player
00:00
00:00
Change a Transition's Speed with Timing Functions
6:59The 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.
The speed of a transition
can vary over its duration.
0:00
The speed can accelerate and
0:03
decelerate rapidly or slowly,
all based on a timing function we set.
0:05
Timing functions are often
called easing functions.
0:10
Because they gradually set
the pace of a transition
0:13
to produce a more realistic
transition effect.
0:16
You see, real life objects don't
always move at a constant speed, and
0:19
they don't just start and stop abruptly.
0:24
So, with CSS timing functions,
the browser can mimic real life motion.
0:27
For instance, the CSS transitions in this
example look lively and interesting.
0:32
Notice how the blue panel has
a realistic bounce in its movement.
0:39
It accelerates downward or upwards, then
it gradually slows down before it stops.
0:44
Take a look at how the same transition
looks with no easing effects applied.
0:51
So now,
the transition of the panel has no bounce.
0:56
This linear movement
seems less interesting
1:00
compared to this one, doesn't it?
1:03
So a timing function can totally
change the way a transition feels.
1:06
When we create a CSS transition,
1:11
the transition follows an acceleration
curve that has a set of time intervals.
1:13
These intervals can speed up or
slow down a transition.
1:18
So, a timing function establishes
the acceleration curve and
1:22
defines the intervals where
a transition speeds up and slows down.
1:26
Using the transition
timing function property,
1:31
we can create these easing effects by
either defining custom time intervals or
1:34
using one of these predefined
timing function keyword values.
1:39
The most common ones being ease, linear,
ease-in, ease-out, and ease-in-out.
1:43
These keyword values determine what
happens in between the beginning and
1:50
end of a transition.
1:54
To see how they all work,
1:56
I've created a demo that displays
the easing effects of each value.
1:57
So when you create a CSS transition,
2:02
the default timing function the browser
applies to your transition is ease.
2:04
So even if you don't include a timing
function in your CSS the browser will
2:10
gradually start and stop your transitions.
2:14
So as you can see here in the example,
2:18
the ease timing function
starts gently then speeds up.
2:20
Now the linear timing function
maintains a linear motion so
2:26
it's at a constant speed with no easing.
2:31
The value ease in starts gradually and
stops suddenly.
2:36
So it starts slow and
doesn't speed up until the end.
2:41
And the ease-out timing function
has the opposite effect as ease-in.
2:44
So it starts suddenly then
slows down at the end.
2:50
And ease-in-out starts and
stops gradually.
2:56
So as we can see it starts slow,
speeds up, then slows down.
3:00
The transition timing function value we
set does not affect the actual duration of
3:06
a transition, just how fast or
slow we perceive the transition to be.
3:11
So in this example,
each transition is 1.8 seconds long,
3:16
Now I wanna create a new transition that
displays a small icon when you hover over
3:26
the download button.
3:31
The icon will fade in, and
slide in from the center, like this.
3:33
So the icon we're going to transition
has a class of button icon.
3:40
And as you can see, in main.css,
the icon has absolute positioning applied,
3:45
and its opacity is set to zero.
3:51
Back inside interactions.css,
I'll create a new rule for
3:54
a button icon where I'll use
transition property to transition
4:00
the opacity property and
the left offset of the button icon.
4:05
Then I'll set the transition duration for
4:14
both properties for 0.5 seconds and
4:18
I will give them a transition
delay of 0.3 seconds.
4:22
So the opacity and left offset values
will both transition over 0.5 seconds and
4:28
have a delay of 0.03 seconds.
4:34
So next on hover,
we'll change the values for
4:37
both the opacity and
left offset of button icon.
4:40
So we'll say opacity:1 and
the left offset will be 80%.
4:48
When we preview this in the browser and
4:54
hover over the download button,
our transition looks great.
4:58
But now I'll add a timing
function to liven it up a bit.
5:02
Back inside the button icon rule I'll type
5:08
transition-timing-function.
5:12
And let's see what the value
ease-out looks like.
5:17
So the icon transition starts suddenly.
5:26
Then it sort of slows down at the end.
5:29
So let's also see what ease-in looks like.
5:33
So now the icon transition
starts gradually.
5:39
And stops suddenly.
5:43
Let's do one more, let's try ease in out.
5:45
And as you can see it starts and
stops gradually.
5:52
So I like ease out so I'll go ahead and
set the timing function
5:57
value to ease out and
you can use whichever one you like best.
6:02
Like the other transition properties we
can specify a comma separated list of
6:10
values for transition timing functions.
6:14
And each timing function
value will be applied
6:17
to the corresponding properties
listed in transition property.
6:20
So for example if I add ease in out as the
first transition timing function value.
6:25
The value ease in out
applies to the opacity
6:33
while ease out applies to
the left offset property.
6:38
Each timing function keyword value
is actually a short hand for
6:42
a more complex timing function
created by a cubic-bezier curve.
6:47
In a later video you'll learn how you
can customize timing functions and
6:51
create interesting easing effects
using cubic bezier functions.
6:55