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

Well done!

You have completed CSS Transitions and Transforms!

Sign up for Treehouse Back to Library

Transitioning Specific Properties with transition-property

2:54 with Guil Hernandez

CSS transitions let you decide exactly what properties to transition. You can transition one or several CSS properties of an element with transition-property.

Resources

Video review

  • If you don't instruct the browser what properties to transition, it will transition all the properties defined in the rule.
  • The value for transition-property tells the browser the CSS property, or set of properties, that will be transitioned.
  • transition-property: all; can create unexpected behaviors because it may transition properties that don't need to be transitioned.

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

    it will transition all the properties defined in the rule. 0:00
    For example, if I add a border radius to the button on hover, 0:02
    so let's say border-radius of 1em. 0:07
    Notice how the boarder radius value also transitions over .4 seconds. 0:12
    Now, there may be times when you don't want to transition 0:18
    every property in the css rule. 0:22
    So, you can specifically transition one or 0:24
    several css properties of an element using transition property. 0:27

    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