Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
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 ;)