Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
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.
Resources
Video review
.photo-overlay {
transition-property: opacity;
transition-duration: .5s;
}
You can shorten the transition above using the transition
property only:
.photo-overlay {
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-function
value 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>;
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up