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