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

General Discussion

Posted by Patsy Tisdale
Patsy Tisdale
5,049 Points

Transitions

This is 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.

This is what I did:

-webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear;

It was wrong, but I don't know why. Anyone have any ideas. And, yes, I know it can be done on one line and I tried that, too.

4 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Patsy,

You didn't specify which property should have the transition.

-webkit-transition-property: border-radius;

Patsy Tisdale
Patsy Tisdale
5,049 Points

I tried this and it didn't work.

-webkit-transition-property: border radius;

And then this:

webkit-transition-property: border-radius 2s 1s linear;

Then I tried this:

-webkit-transition-property: border-radius; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear;

And this:

-webkit-transition-property: border-radius; -webkit-transition:2s 1s linear;

None of that worked. I also looked at the video again. I know I'm missing something, but I still don't know what. ;

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Are you applying it to the .box rule?

.box {
-webkit-transition-property: border-radius;
-webkit-transition-duration: 2s;
-webkit-transition-delay: 1s;
-webkit-transition-timing-function: linear;
}
Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Patsy,

Did you specify the border-radius as your transition property?

Patsy Tisdale
Patsy Tisdale
5,049 Points
Patsy Tisdale
Patsy Tisdale
5,049 Points

This is all of the code I'm using:

/* Complete the challenge by writing CSS below */

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

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

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're missing the hyphen on border radius

Patsy Tisdale
Patsy Tisdale
5,049 Points
Patsy Tisdale
Patsy Tisdale
5,049 Points

This is not my expression but I just have to say OMG! It is almost always something small that I overlook. I looked at that code for about 10 minutes and still didn't notice the missing hyphen. Thanks, Jason, and everyone else. It's right now. Yea.