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
With CSS transitions, you can set different transitions on different CSS properties.
Resources
Video review
- To transition multiple properties, add a comma-separated list of properties within the
transition-property
value. - To transition all specified properties over the same duration, include only one value for
transition-duration
. - The order of the values is important when defining multiple transition durations.
- The order of properties listed in
transition-property
match up with the order of time values listed intransition-duration
.
If you're not using the shorthand, it's good practice to list all the transition-duration
values below the list of properties. This helps you determine which properties match up with which durations, and it helps keep the code more maintainable. For example:
.button {
...
transition-property: background, border-radius, color;
transition-duration: .4s, .8s, .4s;
}
When there are three properties and only two duration values:
.button {
...
transition-property: background, border-radius, color;
transition-duration: .4s, .8s;
}
...the duration for the third property listed will default to the first time value listed.
If you add a fourth transition property:
.button {
...
transition-property: background, border-radius, color, border-color;
transition-duration: .4s, .8s;
}
...the duration for the fourth property will default to the second time value listed.
You need to sign up for Treehouse in order to download course files.
Sign up