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

CSS Unused CSS Stages Transitions and Transforms Transitions - WebKit Only

Zachary Martz
Zachary Martz
2,487 Points
Posted by Zachary Martz
Zachary Martz
2,487 Points

Issue with code challenge

I'm having trouble with this code challenge because for some reason it is not accepting "border-radius" as a value for transition-property. "border-radius" appears in blue when if I type in "background" or some other value it will appear in pink, indicating that the value is accepted. I cannot figure out why it is not accepting border-radius as a value here because I am not doing things any differently from what is in the videos.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Transitions</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

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

.box:hover {
    background: #F08080;
    border-radius: 50%;
  -webkit-transition-property: border-radius;
}

1 Answer

Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

Looks like you put the transition on hover and your also missing webkit on some on them. Here's what you should have got: 

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

.box:hover { 
  background: #F08080; border-radius: 50%; 
}
Zachary Martz
Zachary Martz
2,487 Points
Zachary Martz
Zachary Martz
2,487 Points

Thanks, challenge completed! So it looks like you have to put all the transition property code into the element itself, not the in the pseudo-element. This is kind of confusing because that's different from what's in the instruction videos, and also it means that the code that's in the element is somehow reading the code that's in the pseudo-element and using that in its application.

Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

Yes! Correct! Remember to hit best answer so other people who have the same problem can come to this forum! :)