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 sandis
sandis
10,738 Points

what is wrong?! pls.help me.

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.

.box:hover { background: #F08080; border-radius: 50%; -webkit-transition-property: border-radius; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear;

3 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Sandis, it looks like you have it altogether under the pseudo class. Try it like this.

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

.box:hover {
    background: #F08080;
    border-radius: 50%;
}
sandis
sandis
10,738 Points

i now understand where was my mistake. tks. for help.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

While that does work, this won't work: (changed order)

    -webkit-transition-duration: 2s;
    -webkit-transition: border-radius;
    -webkit-transition-delay: 1s;
    -webkit-transition-timing-function: linear;

For that reason I would recommend either using the shorthand property by itself:

-webkit-transition: border-radius 2s linear 1s;

Or consistent use of the individual properties:

    -webkit-transition-property: border-radius;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 1s;
    -webkit-transition-timing-function: linear;

This way the order doesn't matter.

Luke Bellamy
Luke Bellamy
3,592 Points
Luke Bellamy
Luke Bellamy
3,592 Points

.box { background: #F08080; -webkit-transition: all 2s linear 1s; } .box:hover { border-radius: 50%; }

There you go :)

Luke Bellamy
Luke Bellamy
3,592 Points
Luke Bellamy
Luke Bellamy
3,592 Points

Oh I forgot to mention, there i have told it to transition all of the changes you make in the .box:hover section. However you can change 'all' to 'border-radius' if that's all you want to transition

Philip Cox
Philip Cox
14,818 Points
Philip Cox
Philip Cox
14,818 Points

If I remember correctly. Put the effects on the hover state and the timing on the non hover item.