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