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
ariescamitan
Courses Plus Student 2,033 Pointswhat is wrong with my code, why it is wrong?
I have this code below for exercise, it seems to me it looks ok but the message shows that it wrong code:
.box {
border-radius: 15px;
background: #4682B4;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
}
.box:hover {
background: #F08080;
border-radius: 50%;
}
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsIt looks like you haven't specified which property should have the transition.
Use -webkit-transition-property and set it to the property that should be transitioned.
If you don't specify this then the default is all and all animatable properties will transition.
ariescamitan
Courses Plus Student 2,033 PointsThe question below from exercise did not specify if I need to apply the transition to only one object that is why I did not include the transition-property.
"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. "
Ok let me try to specify it. Thank you for your reply.
Jason Anello
Courses Plus Student 94,610 PointsThe instructions are telling you that it's the border-radius that should have the transition.
If you leave it off then both the border-radius and the background would have the transition. In this case they only want the border-radius to transition and the background color would be an instant change on hover.
ariescamitan
Courses Plus Student 2,033 PointsHi Jason,
I already understand the question and manage to answer it correctly. Thank you very much for the explanation.
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome ariescamitan. Glad you got it worked out.