Combine Transition Properties with the transition Shorthand5:20 with Guil Hernandez
Writing every transition property and value individually can become tedious. We can save time and lines of CSS by combining all the individual transition properties and values into one simple declaration.
You can shorten the transition above using the
transition property only:
transition: opacity .5s;
- It's common practice to list the transition property first in the shorthand, followed by the duration value.
- The order of the values is important when including two time values.
- The first time value listed will always be the transition duration, and the second time value will always be the transition delay.
- It's good practice to write the
transition-timing-functionvalue in between the duration and delay value.
- Listing the timing function between the two time values helps you distinguish the duration from the delay.
transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;
You need to sign up for Treehouse in order to download course files.Sign up