[MUSIC]

[SOUND] In the previous section, you learned that to transition CSS properties

from one set of values to another,

you use transition property to specify which properties to animate.

And transition duration to specify how long the transition should last.

Once you understand the basics of CSS transitions,

you can apply optional effects that control when a transition starts and

vary the speed of a transition to make it look more exciting and realistic.

So, first up, let's take a look at how you can delay the start of a transition

with the transition delay property.

To follow along using the latest workspace, launch the workspace on this

page or download the files to follow along with your own text editor.

So, the photo gallery in this section contains three new images and

photo-overlay divs containing an image's title, description, and a download link.

And they're each inside a photo and photo-container div.

We're gonna continue writing the transition properties here

inside interactions.css beginning with transition delays.

Now, you might be wondering why you would wanna set a delay on a CSS transition.

With a transition delay you can control when a transition starts,

which lets you create transitions that involve multiple steps.

So, for example, you can trigger two or more transitions and

set delays to make each transition occur at different times like this.

So here, the photo overlay transition happens immediately on hover, but

then we see a slight delay in the button transition.

So the button fades in a few milliseconds after the overlay transition begins.

And when I hover over the Download button,

we're seeing a sequence made up of four different transitions.

The button's background and boarder and the button icon's position and opacity.

And notice how there's a slight delay in the button's background transition and

in the position and opacity of the icon.

So, I'll teach you how to create these effects with the transition-delay

property.

When you preview the latest files,

you can see that I've already defined the photo-overlay transition.

This is the same transition you created in the previous section, so first I'm

going to create the simple transition delay for the button's capacity property.

Back in interactions.css, I'll scroll down to the button transitions comment.

And I'm going to target the class .button, and set its opacity to 0.

Now, the button is nested inside photo-overlay, so next, I'll

create a new rule that targets the button when a user hovers over photo-overlay.

And here, I'll set the button's capacity to 1.

Now, you could also group the button selectors with the photo-overlay

selectors up here since they do share the same opacity properties, but

I'm just keeping them separate for these lessons.

Next, I'll add transition properties to transition the button's opacity value.

So, inside the button rule,

I'll add transition-property and set the value to opacity.

Then right below I'll say, transition-duration and set it to .5s.

So now I'll set the delay with the transition-delay property.

The transition-delay property accepts a time value just like

a transition-duration.

And we can define the value in seconds or milliseconds.

So, for example I can set that the value to 1000ms.

That's 1000 milliseconds, which is the same as 1s.

Back in the browser, when I hover over a photo,

the overlay immediately fades in, but the browser waits 1 second

before it starts to transition the Download button's opacity.

So, the button transitions sort of stall for

1 second then executes the property change.

Now, a delay value of 1 second feels like a long time for

the button to fade in, so I'm going to set the delay value to .2s.

And that's all there really is to creating transition delays.

Like transition-property and transition-duration,

the transition-delay property accepts a comma-separated list of delay values.

This lets us delay an element's transition properties individually.

So, I'm gonna transition two more button

properties by creating a new rule of .button:hover.

So I'll add a background property and

set the value to an rbha() value of 74, 137, 202.

And alpha value to 1.

And right below the background property,

I'll add a box-shadow property and set the value to 0, 0, 0, 3px.

And I'll set the box shadow color to an rgba()

value of 255, 255, 255, .7.

These new styles set the alpha value in the button's background to one on hover so

that it's not transparent.

And it adds a white transparent box shadow around the button

that looks like a border.

So, now back in the button rule, I'll add the new properties that I

want to transition to the transition-property value.

So right after opacity I'll add a comma, and define the background property,

and follow that with a comma, and add the box-shadow property.

So, now if I add a second value to transition-delay, it will

affect the second property defined in transition-property, which is background.

So, I'm going to set a delay of .3s for the background property.

And the third delay value I add will effect the third property listed here in

the transition-property value.

Now, I don't wanna set a delay for the box-shadow, so

I'm going to set the third transition delay value to 0s.

So now, when we refresh the browser and hover over a photo,

we can see that the button's opacity is still delayed by .2 seconds.

And when we hover over the button, we immediately see the box-shadow fade in,

while the background alpha transition is delayed by .3 seconds.

Even though I'm not setting a transition delay for the box-shadow property,

I still need to define the value 0s in the list of transition-delays.

Now if I leave it out, the box-shadow's delay defaults to the first value listed.

In this case, it's .2s.

And this also looks good, so

it's up to you which one you wanna display in your gallery.

In the next video you'll learn how to alter the speed of a transition

over its duration.