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