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

Posted by Mariana Morales
Mariana Morales
Courses Plus Student 10,166 Points

Code Challenge: Transitions - WebKit Only

Hi, could anybody give me the solution for this code challenge? I was trying to figure ir out but it seems I can't alone.

Thanks in advance!

4 Answers

Jonathan Musso
Jonathan Musso
3,760 Points
Jonathan Musso
Jonathan Musso
3,760 Points

Mariana, can you post the question?

Mariana Morales
PLUS
Mariana Morales
Courses Plus Student 10,166 Points
Mariana Morales
Mariana Morales
Courses Plus Student 10,166 Points

Yes, what is the transition correct syntax? I tried with this code in the .box: -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-finction: cubic-bazier(0,0,1,1);

but it doesn't work...

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points
Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

You seem to have misspelled "function" in the -webkit-transition-timing-function property.

Mariana Morales
PLUS
Mariana Morales
Courses Plus Student 10,166 Points
Mariana Morales
Mariana Morales
Courses Plus Student 10,166 Points

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.

/* Complete the challenge by writing CSS below */

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

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

Can anyone see my mistake? Thanks

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

Remember to apply the transition to the border-radius property only. you do so by adding the -webkit-transition-property property.

Hope this helps. :)

Mariana Morales
Mariana Morales
Courses Plus Student 10,166 Points

Thanks Elliott! It works :)