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 Timing Functions and Delays Challenge

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Possible Bug in Transition Challenge (Beyond the Basics)

I might have found a bug in the challenge for Beyond the Basics

Beyond the Basics

The question says Create a transition for the border-radius property of .box. Give the transition a duration of .6 seconds, a delay of 1 second, and a timing function that maintains a linear motion.

Which means the delay value is the second number in the transition property. So when I try, 

.box {
  transition: border-radius .6s linear 1s;
}

.box:hover {
    background: #F08080;
    border-radius: 50%;
}

It should work since the delay is 1 second, there's .6 seconds in the duration property, I'm using a linear easing and targeting the correct transition property.

Unless there#'s something else I'm missing! :-)

2 Answers

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Check out mikes02's answer here. Looks like the challenge doesn't accept the shorthand syntax.

Copy-pasted for convenience:

.box {
    -webkit-transition-property: border-radius;
    -webkit-transition-duration: .6s; 
    -webkit-transition-delay: 1s;
    -webkit-transition-timing-function: linear; 
}
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Looks like I missed that one by a day! ;)

So no bug then, people (including me) are just assuming it's for the shorthand syntax. I appreciate your help, thanks!

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Well... it's still sort of a bug. The shorthand works IRL, so it should work in the challenge, or they should explicitly say it doesn't!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Make sense either way to me. I believe the thinking is if we can understand the longhand way of doing it, we'll know enough to handle the shorthand. Perhaps a second task would have been good to tackle the shorthand syntax. :-)

mikes02
mikes02
Courses Plus Student 16,968 Points

It was definitely tricky, it took me a while to figure out it not only wanted the webkit prefix but it also wanted the longhand form, I think the challenge could definitely be phrased better because the shorthand is correct, just not the accepted answer.

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

mikes02,

The code challenge accepts both prefixed or unprefixed. Also, longhand or shorthand.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi there,

The code challenge accepts the shorthand declaration. But for some reason it only accepted the order of values as: border-radius .6s 1s linear. I just fixed it to accept the timing function last — either way is technically correct.

Sorry about that. :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Guil,

So is it fixed yet so that this also passes?

.box {
   transition: .6s linear 1s;
}

I'm sure it's also syntactically correct but still doesn't pass! Thanks. :-)

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Jonathan Grieve,

While that does transition border-radius, omitting the transition-property value implies a transition for all properties.

Since the challenge specifically asks to transition border-radius, it needs to be included in the answer.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Sorry for the confusion Guil... Obviously I forgot to include the border-radius property in my last comment lol

Thanks for your help in this thread. :)