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.

CSS Unused CSS Stages Transitions and Transforms Transitions - WebKit Only

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,650 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%;
}

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,650 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.

Oh wow, that works!

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

Awesome. Thank you Chris!