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 - WebKit Only

Steven Romano
Steven Romano
10,024 Points

Quiz and Challenge Task question

When I was taking the quiz right before the challenge task there was a fill in the blank question that asked what is the second value in the transition shorthand property. I put delay and I was correct. Then in the challenge task I had to write a transition shorthand property and the first time I did it I had the delay in the section spot and it told me I was wrong when I switched the delay and duration it said I was correct.

Here is a copy of the challenge question:

Using the prefix for WebKit-based browsers, create a transition for the border-radius property of .box. Give the transition a duration of 2 seconds, a delay of 1 second, and a timing function that maintains a linear motion.

Is there a discrepancy between the two or am I overlooking something?

This is what I put and it was wrong -webkit-transition:border-radius 1s linear 2s;

This is what I put and it was right -webkit-transition:border-radius 2s linear 1s;

Also, I have one more question since this video is almost a year old do we still need to use the vendor prefixes?

3 Answers

Laura Cressman
Laura Cressman
12,548 Points

The order that you put the values into the shorthand -webkit-transition property determines what they correspond to. The values are listed in the order: property you want to transition (radius in this case), duration, timing function, and delay. The wrong answer you put set the duration to 1 second, and the delay to 2 seconds. When you switched the order, you set the duration to 2 seconds, and the delay to 1 second, which was the right answer. It is very similar to the shorthand margin property and values, where margin: 0 5px 10px 15px; would give a top margin of 0, a right margin of 5 px, a bottom margin of 10px, and a left margin of 15px. If the order was switched the margins would be switched around too. Does that make sense?

Steven Romano
Steven Romano
10,024 Points

Ok I see what I did...in the quiz question it asked for the "second time value" when I first read it I thought it was asking for the second value. So in the transition short had the last value (or the second time value) is always the delay.