1
00:00:00,140 --> 00:00:04,140
CSS transitions allow for
multiple transitions to be defined.

2
00:00:04,140 --> 00:00:07,790
We can create different transitions for
specific properties.

3
00:00:07,790 --> 00:00:11,310
Now, currently I only
have a transition set for

4
00:00:11,310 --> 00:00:13,760
the background property of a button.

5
00:00:13,760 --> 00:00:18,560
But let's say that I want to add
a transition for the text color and

6
00:00:18,560 --> 00:00:20,350
another for border radius.

7
00:00:21,360 --> 00:00:25,280
So first I'm gonna change some of
the initial styles for the button.

8
00:00:25,280 --> 00:00:30,183
So, I'll change the text color

9
00:00:30,183 --> 00:00:34,904
of the button from white to blue

10
00:00:34,904 --> 00:00:39,088
with the value 4a89ca.

11
00:00:39,088 --> 00:00:44,314
Then I'll add a 2px solid border.

12
00:00:44,314 --> 00:00:48,370
I'm also going to remove the background
color from the button rule.

13
00:00:48,370 --> 00:00:51,510
So the button's background will be white.

14
00:00:51,510 --> 00:00:53,370
Then in the hover rule,

15
00:00:53,370 --> 00:00:57,931
I'm going to change the text
color of the button to white.

16
00:00:57,931 --> 00:01:02,674
And then I'm going to
change the background

17
00:01:02,674 --> 00:01:07,041
value to blue with the value 4a89ca.

18
00:01:07,041 --> 00:01:14,724
And I'll add the border-radius
of 1em back in the hover rule.

19
00:01:14,724 --> 00:01:19,246
All right, so the design of
the buttons look different now, but

20
00:01:19,246 --> 00:01:25,127
currently only the background property
is set to transition over 0.4 seconds.

21
00:01:28,455 --> 00:01:33,433
So to transition multiple properties,
you can add a comma separated list of

22
00:01:33,433 --> 00:01:37,040
properties within
the transition-property value.

23
00:01:37,040 --> 00:01:40,000
So I'm going to add the border radius and

24
00:01:40,000 --> 00:01:43,220
color properties to
the transition property value.

25
00:01:47,300 --> 00:01:51,860
So now we can see that all three
properties transition on hover.

26
00:01:54,460 --> 00:01:58,230
If you want all three properties to
transition over the same duration,

27
00:01:58,230 --> 00:02:02,920
then you only need to include one
value for transition duration.

28
00:02:02,920 --> 00:02:06,500
So this value of .4s
will be the duration of

29
00:02:06,500 --> 00:02:08,890
all the transition properties listed here.

30
00:02:10,610 --> 00:02:14,140
But what if certain properties
require different durations?

31
00:02:14,140 --> 00:02:19,690
So for example, I want a longer duration
for the border radius transition.

32
00:02:19,690 --> 00:02:23,430
Well, I can add a second
transition duration value

33
00:02:23,430 --> 00:02:27,450
that will apply to border-radius only.

34
00:02:27,450 --> 00:02:32,955
So right after the value .4s I'll
add a comma then type the value .8s.

35
00:02:35,100 --> 00:02:39,070
Now the order of the values is important
when defining multiple transition

36
00:02:39,070 --> 00:02:40,080
durations.

37
00:02:40,080 --> 00:02:44,400
The first property listed in
transition property will match up

38
00:02:44,400 --> 00:02:49,060
with the first time value listed in
the transition duration property.

39
00:02:49,060 --> 00:02:54,780
And the second property is associated
with the second time value.

40
00:02:54,780 --> 00:02:59,890
I can also add a third duration value
that will only apply to the color value.

41
00:02:59,890 --> 00:03:05,170
I want the duration of the color
transition to be .4s, but

42
00:03:05,170 --> 00:03:10,770
in this case, I don't need to write
.4 seconds again as the third value.

43
00:03:10,770 --> 00:03:13,360
If you ever see three properties and

44
00:03:13,360 --> 00:03:18,470
only two duration values like we have
here, remember that the duration for

45
00:03:18,470 --> 00:03:24,350
the third property listed will default
to the first duration value listed.

46
00:03:24,350 --> 00:03:29,200
So here the duration for
color will default to .4s.

47
00:03:29,200 --> 00:03:32,770
But I usually like to list
all the duration values and

48
00:03:32,770 --> 00:03:35,590
keep them right below
the list of properties.

49
00:03:35,590 --> 00:03:38,885
This helps me see right away which
properties match up with which

50
00:03:38,885 --> 00:03:41,815
durations and
it helps keep the code more maintainable,

51
00:03:41,815 --> 00:03:44,822
especially if I'm working
alongside other developers.

52
00:03:51,370 --> 00:03:55,830
In this section of the course you
learned the basics of CSS transitions.

53
00:03:55,830 --> 00:03:59,380
So far, you've learned that you
can create a basic transition

54
00:03:59,380 --> 00:04:03,190
with just the transition duration
property and you can transition

55
00:04:03,190 --> 00:04:08,630
a specific property with both transition
property and transition duration.

56
00:04:08,630 --> 00:04:12,390
To transition multiple properties,
you can simply list the properties you

57
00:04:12,390 --> 00:04:15,910
want to transition in
the transition-property value.

58
00:04:15,910 --> 00:04:19,090
Then you can give the properties
the same duration or

59
00:04:19,090 --> 00:04:23,790
write a list of duration values that match
up with the list of transition properties.

60
00:04:25,020 --> 00:04:27,560
Now that you know the basics,
you can use what you've learned so

61
00:04:27,560 --> 00:04:29,520
far to transition one or

62
00:04:29,520 --> 00:04:34,740
several CSS properties of an element
on a hover, focus, or active state.

63
00:04:34,740 --> 00:04:40,240
For example, you can create a border
transition around a text field on focus,

64
00:04:40,240 --> 00:04:45,310
or add a soft drop shadow to an image
on hover, even use CSS blend modes or

65
00:04:45,310 --> 00:04:49,260
filter effects to enhance an image
when hovered, and lots more.

66
00:04:49,260 --> 00:04:53,130
These subtle enhancements can improve
the user experience of your website.

67
00:04:53,130 --> 00:04:55,850
Now we're just getting started
using CSS transitions.

68
00:04:55,850 --> 00:04:57,960
There's still a lot of
exciting things to learn.

69
00:04:57,960 --> 00:05:01,830
So coming up in the next section you'll
learn how to control a transition's

70
00:05:01,830 --> 00:05:03,800
start time and its speed.

71
00:05:03,800 --> 00:05:06,890
You'll also learn the handy short-hand
property that makes writing CSS

72
00:05:06,890 --> 00:05:08,870
transitions really simple.

73
00:05:08,870 --> 00:05:09,370
See you soon.