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
You can create a transition by simply defining how long the transition should last. This is called the transition duration.
Resources
Video review
- Transitions can alter the appearance of an element when a state change happens.
- In order to transition a property, you need a start value and an end value.
- The
transition-durationproperty is a required property for CSS transitions. -
transition-durationsets the length of time of the transition; the property accepts a time unit of seconds or milliseconds.
To specify a duration in milliseconds, add a period before the number value. For example:
transition-duration: .4s;
Sometimes you may see millisecond values defined using the ms CSS time unit. For instance, the value .4s is equivalent to:
transition-duration: 400ms;
CSS transitions give you an easy way
to animate parts of your interface by
0:00
changing a set of CSS properties from one
value to another over a period of time.
0:05
Normally when you change
the value of a CSS property, for
0:10
example the background of a button
on hover, the change is abrupt.
0:13
But you can smoothen the change and
0:17
have it occur gradually by animating
it over time with a CSS transition.
0:19
This makes your user interface
interactions more fluid.
0:24
To transition CSS properties
from one value to another,
0:27
we need to tell the browser which
properties to transition and
0:30
how long the transition
effect should take.
0:33
Then you can optionally instruct
the browser to delay the transition and
0:36
control how that transition
changes speed over its duration
0:40
all with just a few lines of CSS.
0:44
Transitions are usually triggered by
a user's action or a change in state.
0:46
So for example, a mouse click or
0:51
a hover, focus and active state can
trigger a CSS transition on a button.
0:53
And you can also use JavaScript
to trigger a transition.
0:57
So there are a lot of
ways to take advantage
1:01
of the visual effects
provided by transitions.
1:04
So, first, I'll show you a really simple
way of creating a transition by defining
1:07
only the length of a transition with
the transition duration property.
1:10
You can follow along using Workspaces
by launching the orkspace on this page.
1:16
Or you can download the files to
follow along with your own text editor
1:20
if you prefer.
1:23
So the index.html file in the workspace
1:23
has six photo container
divs that contain an image
1:28
along with the image's title,
description, and a download link.
1:34
The styles for
this webpage are in the CSS folder.
1:40
Now, the main styles to this photo
gallery are in the file main.css.
1:43
This CSS applies to all browsers, from
phones and tablets to desktop computers.
1:48
For this course I've
split up the CSS files so
1:55
we can focus only on the transition and
transform styles we're about to write and
1:58
not be distracted by
all these main styles.
2:02
So we're going to write our transition and
2:05
transform styles here
inside interactions.css.
2:08
Now, normally on your projects you'd write
the styles in the same CSS file, but
2:13
again, writing them in a separate file
will make everything in these lessons
2:18
easier to explain.
2:21
You can see what the page looks like once
you preview index.html in the browser.
2:23
So the photo gallery we're going to use in
this section of the course is a simple,
2:28
responsive six image gallery.
2:33
Now the styles for the titles and
descriptions in the bottom row
2:36
are a little different from
the ones in the top row and
2:40
you'll see why later on in this section.
2:43
So we're going to enhance some of the user
interactions in this photo gallery using
2:46
CSS transitions first, then make them even
more exciting later with CSS transforms.
2:51
As I mentioned earlier,
CSS transitions let you smoothly change
2:57
the CSS property of an element
over a specified duration.
3:01
And then you can control the speed
at which the properties change.
3:05
Transitions can alter the appearance of an
element whenever a state change happens,
3:10
like when it's hovered over,
focused on, active, or targeted.
3:15
So in order to transition a property you
need a start value and an end value.
3:20
One of the simplest ways
properties can be transitioned
3:26
is when triggered by
a pseudo class like hover.
3:28
In the file interactions.css I'm
3:32
going to create a new rule
that targets button on hover.
3:35
Then I'll add a background property to
change the button's background color to
3:44
a light shade of red.
3:48
So now we have our start value and
our end value.
3:55
Now currently, if I hover over and
3:59
away from a gallery button it looks like
a regular abrupt hover state change.
4:02
So lets smoothly transition the background
color from blue to red on hover.
4:08
There are four different properties
associated with CSS transitions.
4:15
One defines the property or
set of properties to transition.
4:19
Another, the duration of the transition,
and two optional properties for
4:23
defining a timing function and a delay.
4:27
At the very least,
4:31
we can define a transition by defining
how long the transition should last.
4:32
This is called the transition duration.
4:37
So back inside interactions.css,
here in the button rule,
4:40
I'm going to set the duration using
the transition-duration property.
4:45
The transition-duration property is
a required property for CSS transitions.
4:51
In this rule,
4:58
it will define the length of time of
the transition that will occur on hover.
4:58
Transition duration accepts a numeric
value followed by a CSS time unit and
5:04
the time unit can be of seconds or
milliseconds.
5:10
The default value for
transition duration is zero seconds or
5:13
no duration so
no transition in properties occur.
5:18
I'm going to set the duration to
one second by typing the value, 1s.
5:23
So this sets the properties
associated with the class button
5:28
to transition over a period of one second.
5:32
Since we've defined a background
value change here in the hover rule.
5:36
The browser now knows that it needs
to go from this shade of blue
5:40
to this shade of red over one second.
5:44
So now when the button enters the hover
state we see a gradual change
5:48
from blue to red over a duration
of one second, then when
5:54
I mouse off the button it transitions
back to the original state in one second.
5:59
So the browser actually figures out
the colors in between the blue and
6:04
red in order to animate the background.
6:08
When you define a transition
in the original state rule,
6:11
like the button rule here,
the properties will transition to and
6:15
from the state changes you define, for
example on hover, focus, or active.
6:20
If I want to transition the button's
background to a darker shade of red when
6:26
the button is active, I can simply create
a new rule using the active pseudo class.
6:31
So right below the hover rule, I'll create
a new rule using the active pseudo class.
6:36
Then I'll add a background property to
change the button's background color to
6:44
a darker shade of red.
6:49
Back in the browser, when I click and
6:54
hold on a button the background
transitions to dark red over one second.
6:57
So here the background is transitioning
from the hover state to the active state.
7:03
And once I release my mouse, the
background transitions back to the lighter
7:08
red defined in the hover rule,
then back to its original state.
7:13
You can specify the transition
duration value in different ways.
7:17
To specify the duration in milliseconds
7:21
you can add a period
before the number value.
7:23
For example,
let's set the duration to 0.4 seconds.
7:27
So now the transition from
blue to red is much faster.
7:33
Some developers prefer to add
a leading zero before the period.
7:40
This can help you clearly
distinguish values in milliseconds
7:45
from values in seconds.
7:48
Sometimes you may see millisecond values
defined using the MS CSS time unit.
7:50
For instance, the value 0.4 seconds is
7:57
equivalent to the value 400ms or
milliseconds.
8:01
And as we can see in the browser,
8:06
the result is exactly the same
as the value 0.4 seconds.
8:08
So either value is perfectly valid and
acceptable and
8:13
it's up to you which one to use.
8:17
So I'm going to change my
value back to 0.4 seconds.
8:19
So this is all you really need to
create a basic CSS transition.
8:25
Now when you create a transition by
defining the transition duration only,
8:29
the transition applies to all
the properties written in the CSS rule.
8:35
So in the next video you'll learn how to
transition only the properties that need
8:39
transitioning.
8:44
You need to sign up for Treehouse in order to download course files.
Sign up