Combine Transition Properties with the transition Shorthand

Writing every single transition property and value individually can become long and 0:00 tedious, so we can save a little time and 0:05 a few lines of css by combining all the individual transition properties and 0:08 values into one simple declaration with the transition short hand property. 0:12 For example, I can rewrite the photo-overlay transition 0:17 by simply using the transition property and 0:22 writing opacity and the .5 second duration in the value. 0:27 So here, 0:33 I'm writing the transition property first, follow by the transition duration. 0:33 Now writing the duration first and 0:39 the property second will also work, but it's common practice 0:41 to list the transition property first in the short hand. 0:47 Now to add two or more properties to the short hand, 0:53 you need to comma separate each set of transitions. 0:56 So, I'll rewrite the transitions in the button rule 1:00 by writing three sets of transitions. 1:03 So first, I'll type the transition property, then I'll set the transition for 1:08 opacity and set the duration to .3 seconds. 1:13 I'll write a comma, then I'll write the transition for 1:18 the background property and I'll set the duration to .4 seconds. 1:21 And finally, I'll write the transition for box shadow, and 1:26 I'll set the box shadow's duration to .5 seconds. 1:29 If you're including two time values in the short hand for transition duration and 1:34 transition delay, the order of values is important. 1:38 The first time value listed will always be considered the transition duration and 1:42 the second time value will always be considered the transition delay. 1:47 So, I'll add a transition delay of .2 seconds to the opacity transition. 1:51 I'll add a delay of .3 seconds to background and 1:57 a delay of zero seconds to box shadow. 2:01 And it's also a good practice to define the transition timing function 2:04 in between the duration and delay values. 2:08 So between the two time values, 2:12 I'm going to write the ease-out 2:15 timing function. 2:19 Now, sometimes you might see the timing function value placed after the delay, 2:26 like this. 2:31 This will work just fine and it's still perfectly valid. 2:32 But I find that listing the timing functions between the time values, 2:36 helps me distinguish the duration from the delay. 2:41 In this case, each button transition shares the same timing function value 2:45 of eased out, so we could also leave the timing function out of the short hand and 2:51 rewrite the timing function as a separate declaration. 2:57 So right below, I'll write a new property of transition 3:01 timing function and set the value here to ease out. 3:07 This way, we don't have to write the same value in three different places. 3:20 So by now, you know that at the very least, 3:26 you need to define a transition duration to transition a set of properties. 3:29 Using the short hand at the bare minimum, 3:34 you can declare a simple transition like this. 3:37 Now, since all is the default value for transition property, 3:43 I can simplify this even more by removing all and listing the duration value only. 3:47 So a very simple shorthand declaration like this will get the job done if you're 3:55 not transitioning specific properties or needed delay in timing function. 4:00 So I'm gonna stop here, but you don't have to. 4:05 Go ahead and rewrite the transitions for 4:09 button icon using the transition shorthand. 4:10 And you can see the final version, once you download the project files for 4:14 this video. 4:17 Before we move on, let's review what we've learned about transition delays and 4:18 timing functions. 4:22 Transition delay and timing function values are optional. 4:24 The browser does not require them when transitioning properties. 4:27 With transition delay, you control when a transition starts. 4:31 You can trigger multiple transitions and 4:35 set the lays to make transitions of current different times. 4:37 And the transition timing function property 4:41 controls what happens in between the beginning and end of a transition. 4:44 For instance, 4:49 you can you ease-out to start a constant speed then slow down at the end. 4:49 And you can combine transition properties and values into one simple declaration. 4:55 [SOUND] With the transition short hand property. 5:00 Just remember that the first time value listed is the transition duration. 5:03 [SOUND] And the second time value will always be considered the transition delay. 5:07 In the next section, you'll see how CSS transitions get a whole lot more fun and 5:12 interesting when you combine them with CSS transforms. 5:16