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
With a transition delay you can control when a transition starts, which lets you create transitions that involve multiple steps.
Resources
Video review
- With
transition-delayyou can create two or more transitions and set delays to make each transition occur at different times. -
transition-delayaccepts a time value in seconds or milliseconds. -
transition-delayaccepts a comma-separated list of delay values; this lets you delay an element's transition properties individually.
For example:
.button {
...
transition-property: opacity, background, box-shadow;
transition-duration: .4s;
transition-delay: .2s, .3s, 0s;
}
[MUSIC]
0:00
[SOUND] In the previous section, you
learned that to transition CSS properties
0:04
from one set of values to another,
0:08
you use transition property to
specify which properties to animate.
0:10
And transition duration to specify
how long the transition should last.
0:14
Once you understand the basics
of CSS transitions,
0:19
you can apply optional effects that
control when a transition starts and
0:22
vary the speed of a transition to make
it look more exciting and realistic.
0:27
So, first up, let's take a look at how
you can delay the start of a transition
0:31
with the transition delay property.
0:35
To follow along using the latest
workspace, launch the workspace on this
0:38
page or download the files to follow
along with your own text editor.
0:42
So, the photo gallery in this section
contains three new images and
0:46
photo-overlay divs containing an image's
title, description, and a download link.
0:51
And they're each inside a photo and
photo-container div.
0:58
We're gonna continue writing
the transition properties here
1:02
inside interactions.css beginning
with transition delays.
1:06
Now, you might be wondering why you would
wanna set a delay on a CSS transition.
1:10
With a transition delay you can
control when a transition starts,
1:16
which lets you create transitions
that involve multiple steps.
1:20
So, for example, you can trigger two or
more transitions and
1:24
set delays to make each transition
occur at different times like this.
1:28
So here, the photo overlay transition
happens immediately on hover, but
1:36
then we see a slight delay
in the button transition.
1:40
So the button fades in a few milliseconds
after the overlay transition begins.
1:44
And when I hover over the Download button,
1:49
we're seeing a sequence made up
of four different transitions.
1:52
The button's background and boarder and
the button icon's position and opacity.
1:56
And notice how there's a slight delay in
the button's background transition and
2:03
in the position and opacity of the icon.
2:07
So, I'll teach you how to create these
effects with the transition-delay
2:11
property.
2:14
When you preview the latest files,
2:15
you can see that I've already defined
the photo-overlay transition.
2:16
This is the same transition you created
in the previous section, so first I'm
2:21
going to create the simple transition
delay for the button's capacity property.
2:25
Back in interactions.css, I'll scroll
down to the button transitions comment.
2:31
And I'm going to target the class .button,
and set its opacity to 0.
2:37
Now, the button is nested inside
photo-overlay, so next, I'll
2:43
create a new rule that targets the button
when a user hovers over photo-overlay.
2:49
And here,
I'll set the button's capacity to 1.
2:59
Now, you could also group the button
selectors with the photo-overlay
3:03
selectors up here since they do share
the same opacity properties, but
3:07
I'm just keeping them separate for
these lessons.
3:11
Next, I'll add transition properties to
transition the button's opacity value.
3:15
So, inside the button rule,
3:20
I'll add transition-property and
set the value to opacity.
3:23
Then right below I'll say,
transition-duration and set it to .5s.
3:28
So now I'll set the delay with
the transition-delay property.
3:35
The transition-delay property
accepts a time value just like
3:40
a transition-duration.
3:44
And we can define the value in seconds or
milliseconds.
3:46
So, for example I can set
that the value to 1000ms.
3:51
That's 1000 milliseconds,
which is the same as 1s.
3:55
Back in the browser,
when I hover over a photo,
4:01
the overlay immediately fades in,
but the browser waits 1 second
4:04
before it starts to transition
the Download button's opacity.
4:09
So, the button transitions
sort of stall for
4:14
1 second then executes
the property change.
4:16
Now, a delay value of 1 second
feels like a long time for
4:21
the button to fade in, so
I'm going to set the delay value to .2s.
4:25
And that's all there really is
to creating transition delays.
4:36
Like transition-property and
transition-duration,
4:40
the transition-delay property accepts
a comma-separated list of delay values.
4:44
This lets us delay an element's
transition properties individually.
4:49
So, I'm gonna transition two more button
4:53
properties by creating a new
rule of .button:hover.
4:58
So I'll add a background property and
5:06
set the value to an rbha() value of 74,
137, 202.
5:10
And alpha value to 1.
5:16
And right below the background property,
5:19
I'll add a box-shadow property and
set the value to 0, 0, 0, 3px.
5:22
And I'll set the box
shadow color to an rgba()
5:29
value of 255, 255, 255, .7.
5:34
These new styles set the alpha value in
the button's background to one on hover so
5:38
that it's not transparent.
5:44
And it adds a white transparent
box shadow around the button
5:46
that looks like a border.
5:50
So, now back in the button rule,
I'll add the new properties that I
5:52
want to transition to
the transition-property value.
5:57
So right after opacity I'll add a comma,
and define the background property,
6:01
and follow that with a comma,
and add the box-shadow property.
6:07
So, now if I add a second value
to transition-delay, it will
6:11
affect the second property defined in
transition-property, which is background.
6:16
So, I'm going to set a delay of .3s for
the background property.
6:21
And the third delay value I add will
effect the third property listed here in
6:28
the transition-property value.
6:32
Now, I don't wanna set a delay for
the box-shadow, so
6:34
I'm going to set the third
transition delay value to 0s.
6:38
So now, when we refresh the browser and
hover over a photo,
6:43
we can see that the button's opacity
is still delayed by .2 seconds.
6:48
And when we hover over the button,
we immediately see the box-shadow fade in,
6:53
while the background alpha
transition is delayed by .3 seconds.
6:58
Even though I'm not setting a transition
delay for the box-shadow property,
7:07
I still need to define the value 0s
in the list of transition-delays.
7:12
Now if I leave it out, the box-shadow's
delay defaults to the first value listed.
7:17
In this case, it's .2s.
7:23
And this also looks good, so
7:27
it's up to you which one you
wanna display in your gallery.
7:29
In the next video you'll learn how
to alter the speed of a transition
7:31
over its duration.
7:34
You need to sign up for Treehouse in order to download course files.
Sign up