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

Rudolf Jantos
Rudolf Jantos
4,792 Points
Posted by Rudolf Jantos
Rudolf Jantos
4,792 Points

Can't get the transition property to work?

Any feedback much appreciated, can't figure out if the rendering image of TeamTreehouse is wrong or i went somewhere wrong.

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%;
  -webkit-transition-property: border-radius;
  -webkit-transition-timing-function: linear, 2;
  -webkit-transition-delay: 1;
}

5 Answers

Rob Bosch
Rob Bosch
17,751 Points
Rob Bosch
Rob Bosch
17,751 Points

I think you don't see anything because the box has no height or width. (Or content). you could add 

           .box {
           border-radius: 15px;
           background: #4682B4;
           height: 100px;
           width: 100px; 

 }

Now you would be able to see the animation.

Krista Gomke
Krista Gomke
4,426 Points
Krista Gomke
Krista Gomke
4,426 Points

I'm having the same problem... I don't think the height or width have anything to do with it... I tried:

/* Complete the challenge by writing CSS below */

.box {
    border-radius: 15px;
    background: #4682B4;
 }

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

But that doesn't work... it says "Make sure your Transition Property is correct"... I've also put my -webkit- code after the .box element instead of the .box:hover ... no good there either. This is the same as what was used in the video though. What's going on??

Krista Gomke
Krista Gomke
4,426 Points
Krista Gomke
Krista Gomke
4,426 Points

Got it to work with the shorthand coding:

/* Complete the challenge by writing CSS below */

.box {
    border-radius: 15px;
    background: #4682B4;
    -webkit-transition: border-radius 2s linear,  1s;
 }

.box:hover {
    background: #F08080;
    border-radius: 50%;
}
Adam Little
Adam Little
6,735 Points
Adam Little
Adam Little
6,735 Points

The problem is that the transitions need to go under the class of .box, not .box:hover.

Here's my passing code.

.box {

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

}

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