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
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-functionvalue 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>;
Writing every single transition property
and value individually can become long and
0:00
tedious, so we can save a little time and
0:05
a few lines of css by combining all
the individual transition properties and
0:08
values into one simple declaration with
the transition short hand property.
0:12
For example,
I can rewrite the photo-overlay transition
0:17
by simply using
the transition property and
0:22
writing opacity and
the .5 second duration in the value.
0:27
So here,
0:33
I'm writing the transition property first,
follow by the transition duration.
0:33
Now writing the duration first and
0:39
the property second will also work,
but it's common practice
0:41
to list the transition property
first in the short hand.
0:47
Now to add two or
more properties to the short hand,
0:53
you need to comma separate
each set of transitions.
0:56
So, I'll rewrite the transitions
in the button rule
1:00
by writing three sets of transitions.
1:03
So first, I'll type the transition
property, then I'll set the transition for
1:08
opacity and
set the duration to .3 seconds.
1:13
I'll write a comma,
then I'll write the transition for
1:18
the background property and
I'll set the duration to .4 seconds.
1:21
And finally, I'll write the transition for
box shadow, and
1:26
I'll set the box shadow's
duration to .5 seconds.
1:29
If you're including two time values in
the short hand for transition duration and
1:34
transition delay,
the order of values is important.
1:38
The first time value listed will always
be considered the transition duration and
1:42
the second time value will always
be considered the transition delay.
1:47
So, I'll add a transition delay of .2
seconds to the opacity transition.
1:51
I'll add a delay of .3
seconds to background and
1:57
a delay of zero seconds to box shadow.
2:01
And it's also a good practice to
define the transition timing function
2:04
in between the duration and delay values.
2:08
So between the two time values,
2:12
I'm going to write the ease-out
2:15
timing function.
2:19
Now, sometimes you might see the timing
function value placed after the delay,
2:26
like this.
2:31
This will work just fine and
it's still perfectly valid.
2:32
But I find that listing the timing
functions between the time values,
2:36
helps me distinguish
the duration from the delay.
2:41
In this case, each button transition
shares the same timing function value
2:45
of eased out, so we could also leave the
timing function out of the short hand and
2:51
rewrite the timing function
as a separate declaration.
2:57
So right below,
I'll write a new property of transition
3:01
timing function and
set the value here to ease out.
3:07
This way, we don't have to write the same
value in three different places.
3:20
So by now,
you know that at the very least,
3:26
you need to define a transition duration
to transition a set of properties.
3:29
Using the short hand at the bare minimum,
3:34
you can declare a simple
transition like this.
3:37
Now, since all is the default value for
transition property,
3:43
I can simplify this even more by removing
all and listing the duration value only.
3:47
So a very simple shorthand declaration
like this will get the job done if you're
3:55
not transitioning specific properties or
needed delay in timing function.
4:00
So I'm gonna stop here,
but you don't have to.
4:05
Go ahead and rewrite the transitions for
4:09
button icon using
the transition shorthand.
4:10
And you can see the final version,
once you download the project files for
4:14
this video.
4:17
Before we move on, let's review what
we've learned about transition delays and
4:18
timing functions.
4:22
Transition delay and
timing function values are optional.
4:24
The browser does not require them
when transitioning properties.
4:27
With transition delay,
you control when a transition starts.
4:31
You can trigger multiple transitions and
4:35
set the lays to make transitions
of current different times.
4:37
And the transition
timing function property
4:41
controls what happens in between
the beginning and end of a transition.
4:44
For instance,
4:49
you can you ease-out to start a constant
speed then slow down at the end.
4:49
And you can combine transition properties
and values into one simple declaration.
4:55
[SOUND] With the transition
short hand property.
5:00
Just remember that the first time value
listed is the transition duration.
5:03
[SOUND] And the second time value will
always be considered the transition delay.
5:07
In the next section, you'll see how CSS
transitions get a whole lot more fun and
5:12
interesting when you combine
them with CSS transforms.
5:16
You need to sign up for Treehouse in order to download course files.
Sign up