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

Eric Bell
Eric Bell
6,908 Points
Posted by Eric Bell
Eric Bell
6,908 Points

Transition Property Value

The first task is to apply a transition to the border radius property. For whatever reason, it is not accepting the value "border-radius" in the "-webkit-transition-property:" property. Am I doing something wrong? Unless I am mistaken, the value "border-radius" was used in the instructional video, so why is it not working for me?

5 Answers

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Eric,

Are you adding the transition properties to the .box selector or the .box:hover selector?

Eric Bell
Eric Bell
6,908 Points
Eric Bell
Eric Bell
6,908 Points

It actually works fine when I preview it, but the challenge says that I missed it and to check my transition property. I don't understand because it works fine in the preview, but not when my work is checked. Also, when I state the transition property as "border-radius" it does not turn pink like most values do when they are correct/acceptable. It just stays the blue color that signals an incomplete/non-existent value. But again, it works just fine in the preview.

Eric Bell
Eric Bell
6,908 Points
Eric Bell
Eric Bell
6,908 Points

I have tried both and have gotten the same result

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

OK, well let's compare code:

.box {
    border-radius: 15px;
    background: #4682B4;
  -webkit-transition-property: border-radius;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 1s;
  -webkit-transition-timing-function: linear;
 }

What's different about yours?

Eric Bell
Eric Bell
6,908 Points
Eric Bell
Eric Bell
6,908 Points

Well I just tried both again, and this time it did work under the .box selector. Weird though because it worked under both in the preview earlier as well, but not for completion. Maybe some sort of weird temporary bug, I have no idea. Thank you!

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

You're welcome! But just FYI, putting transition properties on the :hover element will actually only make the transition work when you move your mouse ON the element, and not off of it. So it's usually best to add these properties to the element itself as opposed to the :hover pseudo-class (unless of course you're going for that effect).