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