Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Transitions and Transforms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Animatable CSS Properties

3:34 with Guil Hernandez

Not every CSS property can accept transitions. In order to transition a property, it needs to be an animatable property.

Resources

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up