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

Adarsh Prabhu
Adarsh Prabhu
15,394 Points

My code is correct because the preview shows exactly the result that is being asked but message says its incorrect

Don't see anything wrong with my code. When I run the preview, the border-radius transition runs smoothly.

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;

  }

.box:hover {
    background: #F08080;
    border-radius: 50%;
  transition-property: border-radius;
  transition-duration: 2s;
  transition-delay: 1s;
  transition-timing-function: linear;

}

Which error message did it give you? Any clues why it thinks it is incorrect?

Adarsh Prabhu
Adarsh Prabhu
15,394 Points

When I tried in Firefox:

"Bummer! Make sure you transition-property is correct"

In Chrome, I keep losing connection and have to start the quiz again and again.

My initial guess was that it supports WebKit only which is not the FireFox family. So I tried in Chrome without luck.

1 Answer

Try adding the transition properties to the .box class :) Explanation here