1
00:00:00,000 --> 00:00:04,079
[MUSIC]

2
00:00:04,079 --> 00:00:08,422
[SOUND] In the previous section, you
learned that to transition CSS properties

3
00:00:08,422 --> 00:00:10,328
from one set of values to another,

4
00:00:10,328 --> 00:00:14,233
you use transition property to
specify which properties to animate.

5
00:00:14,233 --> 00:00:19,650
And transition duration to specify
how long the transition should last.

6
00:00:19,650 --> 00:00:22,970
Once you understand the basics
of CSS transitions,

7
00:00:22,970 --> 00:00:27,290
you can apply optional effects that
control when a transition starts and

8
00:00:27,290 --> 00:00:31,920
vary the speed of a transition to make
it look more exciting and realistic.

9
00:00:31,920 --> 00:00:35,810
So, first up, let's take a look at how
you can delay the start of a transition

10
00:00:35,810 --> 00:00:37,400
with the transition delay property.

11
00:00:38,480 --> 00:00:42,130
To follow along using the latest
workspace, launch the workspace on this

12
00:00:42,130 --> 00:00:46,290
page or download the files to follow
along with your own text editor.

13
00:00:46,290 --> 00:00:51,615
So, the photo gallery in this section
contains three new images and

14
00:00:51,615 --> 00:00:58,290
photo-overlay divs containing an image's
title, description, and a download link.

15
00:00:58,290 --> 00:01:02,842
And they're each inside a photo and
photo-container div.

16
00:01:02,842 --> 00:01:06,160
We're gonna continue writing
the transition properties here

17
00:01:06,160 --> 00:01:10,900
inside interactions.css beginning
with transition delays.

18
00:01:10,900 --> 00:01:16,210
Now, you might be wondering why you would
wanna set a delay on a CSS transition.

19
00:01:16,210 --> 00:01:20,190
With a transition delay you can
control when a transition starts,

20
00:01:20,190 --> 00:01:24,090
which lets you create transitions
that involve multiple steps.

21
00:01:24,090 --> 00:01:28,016
So, for example, you can trigger two or
more transitions and

22
00:01:28,016 --> 00:01:32,563
set delays to make each transition
occur at different times like this.

23
00:01:36,158 --> 00:01:40,923
So here, the photo overlay transition
happens immediately on hover, but

24
00:01:40,923 --> 00:01:44,720
then we see a slight delay
in the button transition.

25
00:01:44,720 --> 00:01:49,870
So the button fades in a few milliseconds
after the overlay transition begins.

26
00:01:49,870 --> 00:01:52,740
And when I hover over the Download button,

27
00:01:52,740 --> 00:01:56,800
we're seeing a sequence made up
of four different transitions.

28
00:01:56,800 --> 00:02:03,250
The button's background and boarder and
the button icon's position and opacity.

29
00:02:03,250 --> 00:02:07,570
And notice how there's a slight delay in
the button's background transition and

30
00:02:07,570 --> 00:02:11,060
in the position and opacity of the icon.

31
00:02:11,060 --> 00:02:14,857
So, I'll teach you how to create these
effects with the transition-delay

32
00:02:14,857 --> 00:02:15,460
property.

33
00:02:15,460 --> 00:02:16,950
When you preview the latest files,

34
00:02:16,950 --> 00:02:21,040
you can see that I've already defined
the photo-overlay transition.

35
00:02:21,040 --> 00:02:25,926
This is the same transition you created
in the previous section, so first I'm

36
00:02:25,926 --> 00:02:31,123
going to create the simple transition
delay for the button's capacity property.

37
00:02:31,123 --> 00:02:37,320
Back in interactions.css, I'll scroll
down to the button transitions comment.

38
00:02:37,320 --> 00:02:43,738
And I'm going to target the class .button,
and set its opacity to 0.

39
00:02:43,738 --> 00:02:49,096
Now, the button is nested inside
photo-overlay, so next, I'll

40
00:02:49,096 --> 00:02:55,586
create a new rule that targets the button
when a user hovers over photo-overlay.

41
00:02:59,717 --> 00:03:03,950
And here,
I'll set the button's capacity to 1.

42
00:03:03,950 --> 00:03:07,280
Now, you could also group the button
selectors with the photo-overlay

43
00:03:07,280 --> 00:03:11,630
selectors up here since they do share
the same opacity properties, but

44
00:03:11,630 --> 00:03:14,110
I'm just keeping them separate for
these lessons.

45
00:03:15,510 --> 00:03:20,998
Next, I'll add transition properties to
transition the button's opacity value.

46
00:03:20,998 --> 00:03:23,441
So, inside the button rule,

47
00:03:23,441 --> 00:03:28,850
I'll add transition-property and
set the value to opacity.

48
00:03:28,850 --> 00:03:35,770
Then right below I'll say,
transition-duration and set it to .5s.

49
00:03:35,770 --> 00:03:40,202
So now I'll set the delay with
the transition-delay property.

50
00:03:40,202 --> 00:03:44,762
The transition-delay property
accepts a time value just like

51
00:03:44,762 --> 00:03:46,747
a transition-duration.

52
00:03:46,747 --> 00:03:51,030
And we can define the value in seconds or
milliseconds.

53
00:03:51,030 --> 00:03:55,509
So, for example I can set
that the value to 1000ms.

54
00:03:55,509 --> 00:04:01,341
That's 1000 milliseconds,
which is the same as 1s.

55
00:04:01,341 --> 00:04:04,569
Back in the browser,
when I hover over a photo,

56
00:04:04,569 --> 00:04:09,093
the overlay immediately fades in,
but the browser waits 1 second

57
00:04:09,093 --> 00:04:14,020
before it starts to transition
the Download button's opacity.

58
00:04:14,020 --> 00:04:16,463
So, the button transitions
sort of stall for

59
00:04:16,463 --> 00:04:18,982
1 second then executes
the property change.

60
00:04:21,137 --> 00:04:25,917
Now, a delay value of 1 second
feels like a long time for

61
00:04:25,917 --> 00:04:31,743
the button to fade in, so
I'm going to set the delay value to .2s.

62
00:04:36,938 --> 00:04:40,907
And that's all there really is
to creating transition delays.

63
00:04:40,907 --> 00:04:44,414
Like transition-property and
transition-duration,

64
00:04:44,414 --> 00:04:49,900
the transition-delay property accepts
a comma-separated list of delay values.

65
00:04:49,900 --> 00:04:53,470
This lets us delay an element's
transition properties individually.

66
00:04:53,470 --> 00:04:58,968
So, I'm gonna transition two more button

67
00:04:58,968 --> 00:05:06,153
properties by creating a new
rule of .button:hover.

68
00:05:06,153 --> 00:05:10,132
So I'll add a background property and

69
00:05:10,132 --> 00:05:16,610
set the value to an rbha() value of 74,
137, 202.

70
00:05:16,610 --> 00:05:19,139
And alpha value to 1.

71
00:05:19,139 --> 00:05:22,820
And right below the background property,

72
00:05:22,820 --> 00:05:29,169
I'll add a box-shadow property and
set the value to 0, 0, 0, 3px.

73
00:05:29,169 --> 00:05:34,186
And I'll set the box
shadow color to an rgba()

74
00:05:34,186 --> 00:05:38,840
value of 255, 255, 255, .7.

75
00:05:38,840 --> 00:05:44,340
These new styles set the alpha value in
the button's background to one on hover so

76
00:05:44,340 --> 00:05:46,160
that it's not transparent.

77
00:05:46,160 --> 00:05:50,450
And it adds a white transparent
box shadow around the button

78
00:05:50,450 --> 00:05:51,300
that looks like a border.

79
00:05:52,820 --> 00:05:57,786
So, now back in the button rule,
I'll add the new properties that I

80
00:05:57,786 --> 00:06:01,983
want to transition to
the transition-property value.

81
00:06:01,983 --> 00:06:07,232
So right after opacity I'll add a comma,
and define the background property,

82
00:06:07,232 --> 00:06:11,570
and follow that with a comma,
and add the box-shadow property.

83
00:06:11,570 --> 00:06:16,430
So, now if I add a second value
to transition-delay, it will

84
00:06:16,430 --> 00:06:21,860
affect the second property defined in
transition-property, which is background.

85
00:06:21,860 --> 00:06:28,708
So, I'm going to set a delay of .3s for
the background property.

86
00:06:28,708 --> 00:06:32,698
And the third delay value I add will
effect the third property listed here in

87
00:06:32,698 --> 00:06:34,620
the transition-property value.

88
00:06:34,620 --> 00:06:38,330
Now, I don't wanna set a delay for
the box-shadow, so

89
00:06:38,330 --> 00:06:42,885
I'm going to set the third
transition delay value to 0s.

90
00:06:43,980 --> 00:06:48,210
So now, when we refresh the browser and
hover over a photo,

91
00:06:48,210 --> 00:06:53,220
we can see that the button's opacity
is still delayed by .2 seconds.

92
00:06:53,220 --> 00:06:58,666
And when we hover over the button,
we immediately see the box-shadow fade in,

93
00:06:58,666 --> 00:07:03,315
while the background alpha
transition is delayed by .3 seconds.

94
00:07:07,617 --> 00:07:12,796
Even though I'm not setting a transition
delay for the box-shadow property,

95
00:07:12,796 --> 00:07:17,470
I still need to define the value 0s
in the list of transition-delays.

96
00:07:17,470 --> 00:07:23,140
Now if I leave it out, the box-shadow's
delay defaults to the first value listed.

97
00:07:23,140 --> 00:07:27,070
In this case, it's .2s.

98
00:07:27,070 --> 00:07:29,100
And this also looks good, so

99
00:07:29,100 --> 00:07:31,780
it's up to you which one you
wanna display in your gallery.

100
00:07:31,780 --> 00:07:34,840
In the next video you'll learn how
to alter the speed of a transition

101
00:07:34,840 --> 00:07:35,700
over its duration.