Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS - Beyond the Basics Understanding CSS Transitions and Transforms Transition Basics

Posted by Petrov von Petrov
Petrov von Petrov
21,916 Points

Not possible to set different transition-duration for 2 elements with transition-property: all;

Hi

I noticed that when I set transition-property to all (or omit it entirely), a second value defined in transition-duration stops being recognized, and both properties transition with the first value defined there.

I know this to be the case on Chrome, at least. I wonder if it's true with all browsers.

5 Answers

David Conner
STAFF
David Conner
Treehouse Guest Teacher
David Conner
David Conner
Treehouse Guest Teacher

Pedro Goncalves If you wanted all properties to transition at one speed with the exception of one you can say:

div {
  transition-property: all, left;
  transition-duration: 2s, 5s;
}

This would transition all properties, with exception of left, at 2 seconds. Left would be transitioned at 5 seconds. Here is a jsfiddle illustrating this. http://jsfiddle.net/9mesm8cu/1/

PS: "left" is totes a value for transition-property. The first example is straight from Mozilla Developer network on using CSS transitions. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Here is a list of all possible values. http://www.w3.org/TR/css3-transitions/#properties-from-css-

Hope this helps.

David Conner
David Conner
Treehouse Guest Teacher
David Conner
David Conner
Treehouse Guest Teacher

you wouldn't want to use "all" for performance reasons if you can help it but it can be done.

David Conner
STAFF
David Conner
Treehouse Guest Teacher
David Conner
David Conner
Treehouse Guest Teacher

Pedro Goncalves It is not possible to set all to transition at different transition durations. If you want you can say all, opacity then set two different durations. It is even better for performance to set exactly what you need. Such as:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}
Petrov von Petrov
Petrov von Petrov
21,916 Points
Petrov von Petrov
Petrov von Petrov
21,916 Points

Yes, but if you're specifying a transition-property, there's no point in using all, is there? Actually, there's never any point is writing "all", since "all" is the default value for transition-property. This was just some curiosity, like "could you set different transition-durations if you didn't specify the transition-properties?" Seems like no, you can't.

PS: "left" isn't a value for transition-property.

Petrov von Petrov
Petrov von Petrov
21,916 Points
Petrov von Petrov
Petrov von Petrov
21,916 Points

David, there's no "performance reason" to not use transition-property: all. It's just redundant, as "all" it's the default value.

David Conner
David Conner
Treehouse Guest Teacher
David Conner
David Conner
Treehouse Guest Teacher

if You say ''all'' the browser must look at ALL the property values. If you specify one property it looks at one. Does it take you longer to wash one dish or all your dishes?

Anyways, I was just trying to help answer your question. Good luck!

Petrov von Petrov
Petrov von Petrov
21,916 Points
Petrov von Petrov
Petrov von Petrov
21,916 Points

Hi, I hadn't seen the first part of your second answer. You're absolutely right, left is a value for transition-property, my mistake there. As to being able to mix "all" with other values, it's another cool quirkiness I didn't know about.

In fact, I was playing around with it a bit and I found that you can mix it with even more values, like this: 

.box {
  position: absolute;
  left: 10%;
  top: 10%;
    width: 300px;
    height: 300px;
    border-radius: 15px;
    background: steelblue;
    cursor: pointer;

 }

.box:hover {
  background: lightcoral;
  left: 50%;
  top: 70%;
  border-radius: 50%;
  transition: all, top, left;
  transition-duration: .3s, 6s, 10s;

There'll be a transition-duration of 6s for top, 10s for left and 3s for all the other properties. Pretty cool.

Anyway, thanks for your replies and for pointing this out for me.