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

Posted by Sam Vince
Sam Vince
17,449 Points

could someone explain what is wrong with this code? 

.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;
}
Hugo Ballesteros
Hugo Ballesteros
15,945 Points
Hugo Ballesteros
Hugo Ballesteros
15,945 Points

Try this

.box { 
    border-radius: 15px; 
    background: #4682B4; 
    padding: 10px;
    -o-transition:all 5s 2s linear;
    -ms-transition:all 5s 2s linear; 
    -moz-transition:all 5s 2s linear; 
    -khtml-transition:all 5s 2s linear; 
    -webkit-transition:all 5s 2s linear; 
    transition:all 5s 2s linear;
 }

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

2 Answers

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

I think you need to add your code to .box not .box:hover

Alex Tasioulis
Alex Tasioulis
4,950 Points
Alex Tasioulis
Alex Tasioulis
4,950 Points

Hi Sam, the transition stuff should be in .box not in .box:hover. Also your box has no width and height so depending on whether you got anything in it it might not even appear on your screen in the first place. I made a quick pen for you:

http://codepen.io/alextas/pen/njkzc/