Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Transitions and Transforms!
You have completed CSS Transitions and Transforms!
Preview
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;
}
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
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up