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


Barbara Vega
Barbara Vega
Full Stack JavaScript Techdegree Student 19,486 Points

Transitions and Transforms Test

Not sure what I'm doing wrong. I've tried shorthand and long...neither work. Please help. This is what I typed

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

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

Barbara, i found this awesome site for transitions: http://www.css3files.com/transition/

It's easier to understand ;)

2 Answers

You'll need to specify the element being transformed in .box as well.

Alex Lasek
Alex Lasek
11,536 Points

they asked you to add transitions to box element not to its hover state :)

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

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


Alex, thanks for the answer, but a minor error with the ordering:

-webkit-transitions: property duration bezier delay;

-webkit-transitions: border-radius 2s linear 1s;

Other than that, looks good to me ;)

Alex Lasek
Alex Lasek
11,536 Points

yep, you are wright. I wrote it by hart and didn't notice that I changed the order. Thanks for correction