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

challenge.

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.

Like this.

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.