Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic 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.
-
0:00
CSS transitions allow for multiple transitions to be defined.
-
0:04
We can create different transitions for specific properties.
-
0:07
Now, currently I only have a transition set for
-
0:11
the background property of a button.
-
0:13
But let's say that I want to add a transition for the text color and
-
0:18
another for border radius.
-
0:21
So first I'm gonna change some of the initial styles for the button.
-
0:25
So, I'll change the text color
-
0:30
of the button from white to blue
-
0:34
with the value 4a89ca.
-
0:39
Then I'll add a 2px solid border.
-
0:44
I'm also going to remove the background color from the button rule.
-
0:48
So the button's background will be white.
-
0:51
Then in the hover rule,
-
0:53
I'm going to change the text color of the button to white.
-
0:57
And then I'm going to change the background
-
1:02
value to blue with the value 4a89ca.
-
1:07
And I'll add the border-radius of 1em back in the hover rule.
-
1:14
All right, so the design of the buttons look different now, but
-
1:19
currently only the background property is set to transition over 0.4 seconds.
-
1:28
So to transition multiple properties, you can add a comma separated list of
-
1:33
properties within the transition-property value.
-
1:37
So I'm going to add the border radius and
-
1:40
color properties to the transition property value.
-
1:47
So now we can see that all three properties transition on hover.
-
1:54
If you want all three properties to transition over the same duration,
-
1:58
then you only need to include one value for transition duration.
-
2:02
So this value of .4s will be the duration of
-
2:06
all the transition properties listed here.
-
2:10
But what if certain properties require different durations?
-
2:14
So for example, I want a longer duration for the border radius transition.
-
2:19
Well, I can add a second transition duration value
-
2:23
that will apply to border-radius only.
-
2:27
So right after the value .4s I'll add a comma then type the value .8s.
-
2:35
Now the order of the values is important when defining multiple transition
-
2:39
durations.
-
2:40
The first property listed in transition property will match up
-
2:44
with the first time value listed in the transition duration property.
-
2:49
And the second property is associated with the second time value.
-
2:54
I can also add a third duration value that will only apply to the color value.
-
2:59
I want the duration of the color transition to be .4s, but
-
3:05
in this case, I don't need to write .4 seconds again as the third value.
-
3:10
If you ever see three properties and
-
3:13
only two duration values like we have here, remember that the duration for
-
3:18
the third property listed will default to the first duration value listed.
-
3:24
So here the duration for color will default to .4s.
-
3:29
But I usually like to list all the duration values and
-
3:32
keep them right below the list of properties.
-
3:35
This helps me see right away which properties match up with which
-
3:38
durations and it helps keep the code more maintainable,
-
3:41
especially if I'm working alongside other developers.
-
3:51
In this section of the course you learned the basics of CSS transitions.
-
3:55
So far, you've learned that you can create a basic transition
-
3:59
with just the transition duration property and you can transition
-
4:03
a specific property with both transition property and transition duration.
-
4:08
To transition multiple properties, you can simply list the properties you
-
4:12
want to transition in the transition-property value.
-
4:15
Then you can give the properties the same duration or
-
4:19
write a list of duration values that match up with the list of transition properties.
-
4:25
Now that you know the basics, you can use what you've learned so
-
4:27
far to transition one or
-
4:29
several CSS properties of an element on a hover, focus, or active state.
-
4:34
For example, you can create a border transition around a text field on focus,
-
4:40
or add a soft drop shadow to an image on hover, even use CSS blend modes or
-
4:45
filter effects to enhance an image when hovered, and lots more.
-
4:49
These subtle enhancements can improve the user experience of your website.
-
4:53
Now we're just getting started using CSS transitions.
-
4:55
There's still a lot of exciting things to learn.
-
4:57
So coming up in the next section you'll learn how to control a transition's
-
5:01
start time and its speed.
-
5:03
You'll also learn the handy short-hand property that makes writing CSS
-
5:06
transitions really simple.
-
5:08
See you soon.
You need to sign up for Treehouse in order to download course files.
Sign up