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
Full Stack JavaScript Techdegree Student 19,486 PointsTransitions 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; }
2 Answers
Cena Mayo
55,236 PointsYou'll need to specify the element being transformed in .box as well.
Alex Lasek
11,536 Pointsthey 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%;
}
danielhuang
3,331 PointsAlex, 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
11,536 Pointsyep, you are wright. I wrote it by hart and didn't notice that I changed the order. Thanks for correction
cheers
danielhuang
3,331 Pointsdanielhuang
3,331 PointsBarbara, i found this awesome site for transitions: http://www.css3files.com/transition/
It's easier to understand ;)