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 Unused CSS Stages Transitions and Transforms Transitions: Part 2

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
Posted by SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

How do you transition **all** animatable properties using the transition shorthand?

Hi Guil Hernandez mentioned the keyword all if you wanted to transition all animatable properties when using the transition properties individually. When he introduced the transition shorthand, he forgot to mention that. How would you transition all the properties using the shorthand. the order is transition-property then transition-duration then transition-timing-function then transition -delay.

.box {
  transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3), ease 0s, background .6s ease 1s;
}

So how would this look if you wanted to transition both the margin and background the same?

Thanks

1 Answer

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Like this i think

.box {
  transition:all margin 1s cubic-bezier(.5, -.5, .3, 1.3), ease 0s, background .6s ease 1s;
}
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Thanks buddy. So simply, why didn't i think of this? No wait, that's not right. because you used all plus margin plus background. but taking from what you wrote I think it's actually like this. I tried it out and think it worked properly. 

.box {
transition: all 1s cubic-bezier(.5, -.5, .3, 1.5), ease, .5s;
}

you can actually omit the all

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

ah okey, glad it you got it to work!

// Erdrag