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 Essi Salonen
Essi Salonen
2,257 Points

Stage 11: Transitions and Transforms: How to set the transition property

I'm trying to solve the Stage 11 coding challenge (task 1) but can't set the correct transition property. Wonder what's wrong with my code? The example I created seems to work (transitions from blue square to pink circle with the 1s delay).

The 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 code:

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

-moz-duration: 2s;
-o-duration: 2s;
-webkit-duration: 2s;
transition-duration: 2s;
transition: border-radius background 2s linear 1s;  
 }

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

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Essi,

Your current code has a couple of issues.

  1. The challenge is only asking for the -webkit prefix while you've provided several different properties for other browsers
  2. The shorthand transition property you have supplied is invalid and doesn't have the -webkit prefix

The final code you want to have is as follows.

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

.box:hover {
    background: #F08080;
    border-radius: 50%;
}
Ben Schnell
Ben Schnell
14,763 Points

Why does the shorthand have to be under the .box class and not the .box:hover pseudo class? Would it work either way?

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Transitions have to be initiated from a state in which the element is rendered but not changing yet; i.e adding the transition to the :hover state doesn't work as by the time it's called the transition from one property value to another can't occur as it's far too late in the CSS compiler cycle.

Essi Salonen
Essi Salonen
2,257 Points
Essi Salonen
Essi Salonen
2,257 Points

Oh wow, that works!

Didn't realize the -webkit could be part of the shorthand.

Awesome. Thank you Chris!