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
Not every CSS property can accept transitions. In order to transition a property, it needs to be an animatable property.
Resources
- List of animatable CSS properties – MDN
- Animatable properties – W3C
- Animatable properties demo – by Lea Verou
- transition-property – MDN
Video review
- Only animatable properties can be transitioned with CSS.
- A CSS property is animatable only when the browser can define a middle transitioning state for it.
- If a property has an identifiable halfway point, it can accept a transition.
Transition challenge
Select the .photo-overlay div and create a transition that changes an overlay's opacity from 0 to 1 when you hover over it, then fades back to 0 when you hover away.
Earlier, I mentioned that only animatable
properties can be transitioned with CSS.
0:00
So, what exactly is
an animatable property?
0:05
You see, a browser can't
animate every CSS property.
0:08
And as you'll soon learn,
not every property can accept transitions.
0:13
So, the W3C has a list of all animatable
properties we can use for CSS transitions.
0:18
You can view the property
tables at w3.org.
0:25
And I've also posted a list
of the animatable properties
0:29
in the teacher's notes of this video,
along with the link to this page.
0:32
So any of these properties listed
here can be transitioned with CSS.
0:37
But how can you immediately tell if
a CSS property can accept a transition?
0:43
A CSS property is animatiable
only when the browser can
0:49
explicitly identify a middle
transition state for it.
0:52
In other words,
0:56
if a property has an identifiable halfway
point, it can accept a transition.
0:56
For instance, the display property is not
an animatable property because there can
1:02
be no midway point between the values
block and none or inline and none.
1:07
So, for example,
if I select the images on hover,
1:13
set their display to none, and
1:21
give it a transition duration of .4
1:24
seconds, the browser doesn't know
how to handle this transition.
1:29
So, on hover the images keep
disappearing and reappearing,
1:34
creating this fast,
undesirable flickering effect.
1:38
There's no transition happening here
because the browser can only define
1:42
the values as either inline or none
without any recognizable middle values.
1:46
On the other hand, the opacity property
can accept values between 0 and 1.
1:53
So if I set the opacity to 0 on hover,
1:59
the browser is now able to smoothly
transition between the default opacity
2:03
of 1 and the opacity of 0
defined in the hover rule.
2:08
Fortunately for us,
most CSS properties are animatable.
2:16
Colors, widths, height, borders, for
2:20
example, can also be transitioned
from one value to another,
2:22
as they can have recognizable
values in between one another.
2:27
Be sure to check out this neat
interactive demo on animatable properties
2:32
created by Lea Verou, it's a fun way to
learn what properties are animatable.
2:36
I've posted the link in
the teacher's notes of this video.
2:41
You've learned enough about CSS
transitions to complete a simple
2:50
challenge.
2:53
So here's what I'd like you to do next.
2:54
The bottom row of the image gallery
displays the image titles and
2:57
descriptions as overlays positioned
on top of the three images.
3:01
So let's make these a little more
lively with a CSS transition.
3:05
Select the photo overlay element
containing the image title and
3:09
description, then create a transition
that changes an overlay's opacity from 0
3:13
to 1 when you hover over it, then fades
it back to 0 when you hover away.
3:17
Like this.
3:23
This is a great challenge
to get you thinking about
3:25
how you can use CSS
transitions in your projects.
3:28
Coming up in the next video,
I'll show you the method I used.
3:31
You need to sign up for Treehouse in order to download course files.
Sign up