Control a Transition's Start Time with transition-delay

[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