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
lata sharma
iOS Development Techdegree Student 5,292 PointsTransitions
.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
26,676 PointsHi 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%;
}
Andrew Stelmach
12,583 PointsNothing, 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
iOS Development Techdegree Student 5,292 PointsThanks 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!
lata sharma
iOS Development Techdegree Student 5,292 PointsChris,
Thanks! I did try the webkit too...but I forgot the transition property!
Chris Shaw
26,676 PointsNo 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
7,774 PointsYou 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.
Andrew Stelmach
12,583 PointsAndrew Stelmach
12,583 PointsBlows my answer out of the water lol
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Chris,
The initial value for
transition-propertyisallIt'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-colorand theborder-radiuswould have the transition if you don't specify it.Chris Shaw
26,676 PointsChris Shaw
26,676 PointsJason Anello That's not what I meant, what I meant was without the
transition-propertythe browser can't animate anything as it hasn't been instructed to therefore it will result in nothing happening.Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsWhat I've tried to point out is that the
transition-propertyhas a default value ofallIf 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 thetransition-propertyHere's a codepen demo illustrating this: http://codepen.io/anon/pen/xjLJy
There is no
transition-propertyset here and you can see that both the background color and the radius will transition.