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

General Discussion

Posted by Andrei Mondoc
Andrei Mondoc
4,380 Points

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

Andrei Mondoc
Andrei Mondoc
4,380 Points
Andrei Mondoc
Andrei Mondoc
4,380 Points

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

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

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."

Andrei Mondoc
Andrei Mondoc
4,380 Points

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