Transitioning Specific Properties with transition-property2:54 with Guil Hernandez
CSS transitions let you decide exactly what properties to transition. You can transition one or several CSS properties of an element with transition-property.
- If you don't instruct the browser what properties to transition, it will transition all the properties defined in the rule.
- The value for
transition-propertytells the browser the CSS property, or set of properties, that will be transitioned.
transition-property: all;can create unexpected behaviors because it may transition properties that don't need to be transitioned.
CSS transitions let you decide exactly what properties to transition. 0:00 If you don't instruct the browser what properties to transition, 0:05 it will transition all the properties defined in the rule. 0:08 For example, if I add a border radius to the button on hover, 0:11 so let's say border-radius of 1em. 0:16 Notice how the boarder radius value also transitions over .4 seconds. 0:21 Now, there may be times when you don't want to transition 0:27 every property in the css rule. 0:31 So, you can specifically transition one or 0:33 several css properties of an element using transition property. 0:36 The value for transition property tells the browser the CSS property or 0:43 set of properties that would be transition. 0:48 Now the reason why you still see a transition occur even when it is not 0:51 defined is because the fault value for transition property is the keyword, all. 0:56 So defining a transition duration without transition property is exactly 1:03 the same as defining it with transition property and using all as the value. 1:08 So the value all transitions all 1:14 animatable properties declared in the rule. 1:17 In other words, any property that can animate will animate. 1:20 You'll learn more about animatable properties in a bit. 1:24 Now, I don't recommend using the value all when transitioning one, 1:27 two, three, or only a few properties. 1:31 Like we are now. 1:34 Although you may not notice it, using transition property all 1:36 can cause some minor drawbacks in your site performance. 1:40 The browser has to do some extra work to render the transition 1:43 because it's going to check for more property changes than it needs to. 1:47 For example here, it's also checking for the width. 1:51 Font weight, text-decoration, text-transform, padding and 1:55 margin values defined in main.css, 2:01 as opposed to the ones we specify here in the value, and 2:05 the value all can also create unexpected behaviors 2:10 because it may transition properties that don't need to be transitioned. 2:14 So I specifically want to transition the background of my buttons, so 2:18 I'm going to define background as the value. 2:23 So now only the property identified within the transition property value will be 2:27 effected by my transition, in this case it's background. 2:32 So notice how the boarder radius no longer transitions over point four seconds. 2:36 So I'll just go ahead and 2:42 remove the border radius declaration from my CSS moving forward. 2:43
You need to sign up for Treehouse in order to download course files.Sign up