Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

CSS Transition quiz

I am on the CSS transition quiz and i am stuck on it. I have a div with the class box and i am asked to assign a transiton property using the webkit prefix for the border-radius with a duration of 2s a delay of 1s and timing function with the value of linear

This is my code

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

2 Answers

Problem solved! I was assaigning the transition property to the hover state of the elment instead of the .box itself.

Feels good, huh? You're basically telling the .box div, "okay, if you're asked to transition, instead of just flashing instantly to the new styling, this is how I want you to do it."

And then in that .box:hover state, you're styling how you want the .box to look when the user hovers over it (after the transition).

So when a user hovers over the .box div, the .box div says, "Okay, I'll go with the new .box:hover look while you hover over me, but I'm gonna transition smoothly."

Thank you for your reply! Your example is very understandable and helpful.