Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- Getting to Know Transitions and Transforms 2:34
- Creating Your First Transition with transition-duration 8:45
- Transitioning Specific Properties with transition-property 2:54
- Transition Challenge 2 objectives
- Animatable CSS Properties 3:34
- The Transition Challenge Solution 2:22
- Transitioning Multiple Properties 5:09
- Transitioning Multiple Properties 2 objectives
- Review: Getting Started with CSS Transitions 7 questions
Start a free Courses trial
to watch this video
![](https://videos.teamtreehouse.com/stills/TH-CSS_TransitionsAndTransforms_S1V6-stills-5.jpg?token=6994d344_02becb8089e726687013ff6cfefa0e73e799c614)
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up-
ammarkhan
Front End Web Development Techdegree Student 21,661 Points1 Answer
-
Tatiana Perry
17,156 Points1 Answer
View all discussions for this video
Related 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