Transitioning Multiple Properties

CSS transitions allow for multiple transitions to be defined. 0:00 We can create different transitions for specific properties. 0:04 Now, currently I only have a transition set for 0:07 the background property of a button. 0:11 But let's say that I want to add a transition for the text color and 0:13 another for border radius. 0:18 So first I'm gonna change some of the initial styles for the button. 0:21 So, I'll change the text color 0:25 of the button from white to blue 0:30 with the value 4a89ca. 0:34 Then I'll add a 2px solid border. 0:39 I'm also going to remove the background color from the button rule. 0:44 So the button's background will be white. 0:48 Then in the hover rule, 0:51 I'm going to change the text color of the button to white. 0:53 And then I'm going to change the background 0:57 value to blue with the value 4a89ca. 1:02 And I'll add the border-radius of 1em back in the hover rule. 1:07 All right, so the design of the buttons look different now, but 1:14 currently only the background property is set to transition over 0.4 seconds. 1:19 So to transition multiple properties, you can add a comma separated list of 1:28 properties within the transition-property value. 1:33 So I'm going to add the border radius and 1:37 color properties to the transition property value. 1:40 So now we can see that all three properties transition on hover. 1:47 If you want all three properties to transition over the same duration, 1:54 then you only need to include one value for transition duration. 1:58 So this value of .4s will be the duration of 2:02 all the transition properties listed here. 2:06 But what if certain properties require different durations? 2:10 So for example, I want a longer duration for the border radius transition. 2:14 Well, I can add a second transition duration value 2:19 that will apply to border-radius only. 2:23 So right after the value .4s I'll add a comma then type the value .8s. 2:27 Now the order of the values is important when defining multiple transition 2:35 durations. 2:39 The first property listed in transition property will match up 2:40 with the first time value listed in the transition duration property. 2:44 And the second property is associated with the second time value. 2:49 I can also add a third duration value that will only apply to the color value. 2:54 I want the duration of the color transition to be .4s, but 2:59 in this case, I don't need to write .4 seconds again as the third value. 3:05 If you ever see three properties and 3:10 only two duration values like we have here, remember that the duration for 3:13 the third property listed will default to the first duration value listed. 3:18 So here the duration for color will default to .4s. 3:24 But I usually like to list all the duration values and 3:29 keep them right below the list of properties. 3:32 This helps me see right away which properties match up with which 3:35 durations and it helps keep the code more maintainable, 3:38 especially if I'm working alongside other developers. 3:41 In this section of the course you learned the basics of CSS transitions. 3:51 So far, you've learned that you can create a basic transition 3:55 with just the transition duration property and you can transition 3:59 a specific property with both transition property and transition duration. 4:03 To transition multiple properties, you can simply list the properties you 4:08 want to transition in the transition-property value. 4:12 Then you can give the properties the same duration or 4:15 write a list of duration values that match up with the list of transition properties. 4:19 Now that you know the basics, you can use what you've learned so 4:25 far to transition one or 4:27 several CSS properties of an element on a hover, focus, or active state. 4:29 For example, you can create a border transition around a text field on focus, 4:34 or add a soft drop shadow to an image on hover, even use CSS blend modes or 4:40 filter effects to enhance an image when hovered, and lots more. 4:45 These subtle enhancements can improve the user experience of your website. 4:49 Now we're just getting started using CSS transitions. 4:53 There's still a lot of exciting things to learn. 4:55 So coming up in the next section you'll learn how to control a transition's 4:57 start time and its speed. 5:01 You'll also learn the handy short-hand property that makes writing CSS 5:03 transitions really simple. 5:06 See you soon. 5:08