Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Transitioning Multiple Properties

5:09 with Guil Hernandez

With CSS transitions, you can set different transitions on different CSS properties.

Resources

Video review

  • To transition multiple properties, add a comma-separated list of properties within the transition-property value.
  • To transition all specified properties over the same duration, include only one value for transition-duration.
  • The order of the values is important when defining multiple transition durations.
  • The order of properties listed in transition-property match up with the order of time values listed in transition-duration.

If you're not using the shorthand, it's good practice to list all the transition-duration values below the list of properties. This helps you determine which properties match up with which durations, and it helps keep the code more maintainable. For example:

.button {
  ...
  transition-property: background, border-radius, color;
  transition-duration: .4s, .8s, .4s;
}

When there are three properties and only two duration values:

.button {
  ...
  transition-property: background, border-radius, color;
  transition-duration: .4s, .8s;
}

...the duration for the third property listed will default to the first time value listed.

If you add a fourth transition property:

.button {
  ...
  transition-property: background, border-radius, color, border-color;
  transition-duration: .4s, .8s;
}

...the duration for the fourth property will default to the second time value listed.

  • 0:00

    CSS transitions allow for multiple transitions to be defined.

  • 0:04

    We can create different transitions for specific properties.

  • 0:07

    Now, currently I only have a transition set for

  • 0:11

    the background property of a button.

  • 0:13

    But let's say that I want to add a transition for the text color and

  • 0:18

    another for border radius.

  • 0:21

    So first I'm gonna change some of the initial styles for the button.

  • 0:25

    So, I'll change the text color

  • 0:30

    of the button from white to blue

  • 0:34

    with the value 4a89ca.

  • 0:39

    Then I'll add a 2px solid border.

  • 0:44

    I'm also going to remove the background color from the button rule.

  • 0:48

    So the button's background will be white.

  • 0:51

    Then in the hover rule,

  • 0:53

    I'm going to change the text color of the button to white.

  • 0:57

    And then I'm going to change the background

  • 1:02

    value to blue with the value 4a89ca.

  • 1:07

    And I'll add the border-radius of 1em back in the hover rule.

  • 1:14

    All right, so the design of the buttons look different now, but

  • 1:19

    currently only the background property is set to transition over 0.4 seconds.

  • 1:28

    So to transition multiple properties, you can add a comma separated list of

  • 1:33

    properties within the transition-property value.

  • 1:37

    So I'm going to add the border radius and

  • 1:40

    color properties to the transition property value.

  • 1:47

    So now we can see that all three properties transition on hover.

  • 1:54

    If you want all three properties to transition over the same duration,

  • 1:58

    then you only need to include one value for transition duration.

  • 2:02

    So this value of .4s will be the duration of

  • 2:06

    all the transition properties listed here.

  • 2:10

    But what if certain properties require different durations?

  • 2:14

    So for example, I want a longer duration for the border radius transition.

  • 2:19

    Well, I can add a second transition duration value

  • 2:23

    that will apply to border-radius only.

  • 2:27

    So right after the value .4s I'll add a comma then type the value .8s.

  • 2:35

    Now the order of the values is important when defining multiple transition

  • 2:39

    durations.

  • 2:40

    The first property listed in transition property will match up

  • 2:44

    with the first time value listed in the transition duration property.

  • 2:49

    And the second property is associated with the second time value.

  • 2:54

    I can also add a third duration value that will only apply to the color value.

  • 2:59

    I want the duration of the color transition to be .4s, but

  • 3:05

    in this case, I don't need to write .4 seconds again as the third value.

  • 3:10

    If you ever see three properties and

  • 3:13

    only two duration values like we have here, remember that the duration for

  • 3:18

    the third property listed will default to the first duration value listed.

  • 3:24

    So here the duration for color will default to .4s.

  • 3:29

    But I usually like to list all the duration values and

  • 3:32

    keep them right below the list of properties.

  • 3:35

    This helps me see right away which properties match up with which

  • 3:38

    durations and it helps keep the code more maintainable,

  • 3:41

    especially if I'm working alongside other developers.

  • 3:51

    In this section of the course you learned the basics of CSS transitions.

  • 3:55

    So far, you've learned that you can create a basic transition

  • 3:59

    with just the transition duration property and you can transition

  • 4:03

    a specific property with both transition property and transition duration.

  • 4:08

    To transition multiple properties, you can simply list the properties you

  • 4:12

    want to transition in the transition-property value.

  • 4:15

    Then you can give the properties the same duration or

  • 4:19

    write a list of duration values that match up with the list of transition properties.

  • 4:25

    Now that you know the basics, you can use what you've learned so

  • 4:27

    far to transition one or

  • 4:29

    several CSS properties of an element on a hover, focus, or active state.

  • 4:34

    For example, you can create a border transition around a text field on focus,

  • 4:40

    or add a soft drop shadow to an image on hover, even use CSS blend modes or

  • 4:45

    filter effects to enhance an image when hovered, and lots more.

  • 4:49

    These subtle enhancements can improve the user experience of your website.

  • 4:53

    Now we're just getting started using CSS transitions.

  • 4:55

    There's still a lot of exciting things to learn.

  • 4:57

    So coming up in the next section you'll learn how to control a transition's

  • 5:01

    start time and its speed.

  • 5:03

    You'll also learn the handy short-hand property that makes writing CSS

  • 5:06

    transitions really simple.

  • 5:08

    See you soon.

You need to sign up for Treehouse in order to download course files.

Sign up