Preview

Start a free Courses trial
to watch this video

Control a Transition's Start Time with transition-delay

Name: Control a Transition's Start Time with transition-delay
Uploaded: 2016-03-16T13:12:38Z
Duration: 456 s
Description: With a transition delay you can control when a transition starts, which lets you create transitions that involve multiple steps.

7:36 with Guil Hernandez

With a transition delay you can control when a transition starts, which lets you create transitions that involve multiple steps.

Teacher's Notes
Video Transcript
Downloads

Resources

transition-delay – MDN

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;
}

[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.

CSS Transitions and Transforms

Control a Transition's Start Time with transition-delay

Resources

Video review