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

Posted by Slavik Ostapenko
Slavik Ostapenko
Courses Plus Student 12,480 Points

Can't get thrue the challenge of transition

So here's the challenge: 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.

Here's what I do

.box { border-radius: 15px; background: #4682B4; }

.box:hover { background: #F08080; border-radius: 50%; transition-duration: 2s; transition-delay: 1s; transition-timing-function: linear;

I've also tried using a shorthand

transition: 2s linear 1s;

In both cases preview works fine, i.e. it does the job, BUT when i submit my answer - BUMMER! Something's wrong. PLEASE HELP!!!

3 Answers

Phuc Tran
Phuc Tran
6,542 Points

Sorry my bad forgetting to mention, you placed the transition css in the wrong property. Here's the code:

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

In the box:hover property, the things which to be defined are what kind of transition it is (e.g. change shape, disappear, etc.), but if you want to apply the transition and specify how it goes, you need to apply that to the transition element, which here is .box
Slavik Ostapenko
PLUS
Slavik Ostapenko
Courses Plus Student 12,480 Points
Slavik Ostapenko
Slavik Ostapenko
Courses Plus Student 12,480 Points

Thanks a lot, it worked like a charm!

Phuc Tran
Phuc Tran
6,542 Points
Phuc Tran
Phuc Tran
6,542 Points

You didn't set the transition property to only border-radius, then the transition will apply to all as default, which is not the assignment. Here's the correct code: 

-webkit-transition: border-radius 2s linear 1s;
Slavik Ostapenko
Slavik Ostapenko
Courses Plus Student 12,480 Points

Still doesnt' work. Here's the full code, maybe I don't see something:

.box { border-radius: 15px; background: #4682B4; }

.box:hover { background: #F08080; border-radius: 50%; -webkit-transition: border-radius 2s linear 1s;

// The other thing I've tried was this

.box:hover { background: #F08080; border-radius: 50%; transition-duration: 2s; transition-delay: 1s; transition-timing-function: linear; transition-property:border-radius;