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.