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

lata sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
lata sharma
iOS Development Techdegree Student 5,292 Points

Transitions

.box { border-radius: 15px; background: #4682B4; transition-timing-function: linear;

}

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

What am I doing wrong?

5 Answers

Chris Shaw
Chris Shaw
26,650 Points

Hi lata,

The challenge is asking for WebKit only properties unlike the official W3C specified properties you have above, also you have your transition properties in the :hover state of .box but instead they should be in the normal .box selector above. The only property you missed was transition-property which the challenge is asking for otherwise the browser won't know which properties to animate.

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

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

Blows my answer out of the water lol

Hi Chris,

The initial value for transition-property is all

It's not that the browser won't know which properties to apply the transition to but it will apply it to all animatable properties. In this case both the background-color and the border-radius would have the transition if you don't specify it.

Chris Shaw
Chris Shaw
26,650 Points

Jason Anello That's not what I meant, what I meant was without the transition-property the browser can't animate anything as it hasn't been instructed to therefore it will result in nothing happening.

What I've tried to point out is that the transition-property has a default value of all If you leave that property off then it will animate all properties that can be animated. Sometimes this would be what you want and in that case you can leave off the transition-property

Here's a codepen demo illustrating this: http://codepen.io/anon/pen/xjLJy

There is no transition-property set here and you can see that both the background color and the radius will transition.

Nothing, as far as I can tell! It creates A transition. But without knowing what your goal is, it's impossible to give you an answer!

lata sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
lata sharma
iOS Development Techdegree Student 5,292 Points

Thanks Andrew. So...this was the question: 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.

But it gives me a "bummer" for the above code!

Chris Shaw
Chris Shaw
26,650 Points

No worries, I've seen a few others on the forum overlook it as well which is why I prefer the shorthand property as it's impossible to forget the order where as singular properties make it somewhat more difficult to remember.

Peter Mumford
Peter Mumford
7,774 Points

You can add transitions with the 'all' property. I sometimes add transitions to links with something like this: a {-webkit-transition: all 0.5s ease;}

That way any links that change on hover (in color, background, etc), all have the same half-second transition.