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
Rajinder Sihota
3,473 PointsTransitions -Webkit Only
Asks for: 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.
Code I came up with which doesn't work:
transition-property: border radius;
transition-duration: 2s;
transition-delay: 1s;
transition-timing-function: linear;
Any help appreciated
9 Answers
Elliott Frazier
Courses Plus Student 9,647 Pointsyou need to add the webkit vendor prefix like this:
-webkit-transition-property: border-radius;
-webkit-transition-duration: 2s;
-webkit-transition-delay: 1s;
-webkit-transition-timing-function: linear;
Elliott Frazier
Courses Plus Student 9,647 Pointsyou needed to put a "-" between 'border' and 'radius' without a white space.
Like this:
-webkit-transition-property: border-radius;
instead of:
-webkit-transition-property: border radius;
vandevski
20,617 PointsIf it still isn't working, try the shorthand:
-webkit-transition: border-radius 2s linear 1s;
Elliott Frazier
Courses Plus Student 9,647 PointsI took the test and the long hand way works fine.
vandevski
20,617 PointsWhen I was taking the course it didn't work, probably some small error I made. The long hand lets me pass now, maybe the problem is something else?
Tori Kyes
3,948 PointsI can't get it to take my code...I've tried the hard way, the shorthand, and both. Nada.
-webkit-transition-property: border-radius; -webkit-transition-duration: 2s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 1s;
or
-webkit-transition: border-radius 2s linear 1s;
Any help?
Tori Kyes
3,948 PointsFigured it out. It only accepted if i put code under .box not under .box:hover. In case anyone equally has that issue.
Shankar Narayan
9,099 PointsNot working? i feel it's a problem with the treehouse tool!
.box { border-radius: 15px; background: #4682B4; }
.box:hover { background: #F08080; border-radius: 50%; -webkit-transition-property: border-radius; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear; }
result: // Bummer! Make sure your transition property is correct.//
Rajinder Sihota
3,473 PointsI put this answer in and it still doesn't give me the correct answer.
Says to make sure your transition property is correct.
Mike Morales
19,833 PointsHi Rajinder, I had completed this challenge yesterday but I went ahead and tried it again, and I had no problem with the challenge. Everything worked just fine. Make sure you aren't leaving something out like a comma, or semi-colon. Always double check your work, and watch the videos over again, and it helps to jot down some notes during the process of watching the videos. It just takes a little time and effort. Good luck!
vandevski
20,617 PointsRajinder Sihota what selector did you use in your CSS?
vandevski
20,617 PointsRajinder,
Could you show us your code using Codepen: http://codepen.io/pen/
Rajinder Sihota
3,473 PointsThanks for the help, the mistake seemed to be the border-radius not putting in the dash mark.
Elliott Frazier
Courses Plus Student 9,647 PointsNo problem! I'm glad
It helped. :)
Elliott Frazier
Courses Plus Student 9,647 PointsNo problem!
I'm glad it helped. :)
Shankar Narayan
9,099 PointsIt's still not working for me! below is the code snippet!
.box:hover { background: #F08080; border-radius: 50%; -webkit-transition-property: border-radius; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear; }