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

Posted by Polischuk Volodymyr
Polischuk Volodymyr
12,278 Points

Transitions and Transforms. I can not perform the task

task: 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. my decision:What is wrong? <body> <style> .box { border-radius: 15px; background: #4682B4; height: 200px; width: 200px; margin: 150px auto; -webkit-transition-duration: 1s; } .box:hover { background: #F08080; border-radius: 50%; -webkit-transition-duration: 2s; } </style> <div class="box"></div> </body>

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Polischuk,

All the transition properties should be set on .box and not on .box:hover

You have to specify which property should get the transition as well as the duration, timing function, and delay.

You can use the individual properties to do this: (I'm omitting the existing declarations)

.box {
  -webkit-transition-property: border-radius;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  -webkit-transition-delay: 1s;
}

Or you can use the shorthand transition property:

.box {
  -webkit-transition: border-radius 2s linear 1s;
}
Polischuk Volodymyr
Polischuk Volodymyr
12,278 Points

thank you! )

Armando Leon
Armando Leon
15,245 Points
Armando Leon
Armando Leon
15,245 Points

For reference, it really helps if you use code formatting, and place one declaration per line: 

.box { 
  border-radius: 15px; 
  background: #4682B4; 
  height: 200px; 
  width: 200px; 
  margin: 150px auto;
   -webkit-transition-duration: 1s; 
} 

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

This makes it easier to read and see where problems might arise. :)

In your case, you simply forgot to set a transition delay. Try adding this: 

.box:hover {
  /* Other declarations here */
  -webkit-transition-delay: 1s;
}

Best of luck.