Animatable CSS Properties

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