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
Shuddha Chowdhury
3,817 Pointstransition code help please
Hey the given task is :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. The code should be : .box{
-webkit-duration: 2s;
transition-duration: 2s;
transition-delay: 1s;
transition-timing-function:linear;
}
But it didn't work.What's the problem please?Can Anyone kindly help?
Shuddha Chowdhury
3,817 PointsUnfortunately It didn't work. There is already code written there :/* Complete the challenge by writing CSS below */
.box { border-radius: 15px; background: #4682B4; }
.box:hover { background: #F08080; border-radius: 50%; }
I made it : .box { border-radius: 15px; background: #4682B4; -webkit-transition: all 1s linear 2s; }
.box:hover { background: #F08080; border-radius: 50%; } But it still shows the error :(
Adam Sackfield
Courses Plus Student 19,663 PointsCould you post a direct link to the question so i may investigate it thanks.
Shuddha Chowdhury
3,817 Points
Adam Sackfield
Courses Plus Student 19,663 PointsSo close instead of "all" you need to target the border-radius, although all works the same its the quiz being pedantic. Below is what i did and it let me pass.
-webkit-transition: border-radius 2s linear 1s;
Shuddha Chowdhury
3,817 PointsIt worked at last.It seemed a little confusing to me and I think its due to webkit addition.The above code is far easier and simple than I thought.Thanks so much for the help.
Adam Sackfield
Courses Plus Student 19,663 PointsNo problem you will find alot of the properties have a shorthand version. For instance "font:" can be used to specify font-name, size and more all on one line. If you post your email i can send you a cheat sheet i made its incomplete but the CSS part is done, then it shows all the syntax you need to use.
Shuddha Chowdhury
3,817 Pointsshuddha_thegame@yahoo.com.You sent me an excel cheat sheet before.It made the life easier and its so nicely organized.
Adam Sackfield
Courses Plus Student 19,663 PointsI remember now.
David Newcombe
4,544 PointsLong hand should look a little like this
box {
-webkit-transition-properties:border-radius;
-webket-transition-duration:2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;}
Short hand should look like this: .box {-webkit-transition:border-radius 2s linear 1s;}
In your first example you didn't vendor prefix all the properties, and you didn't target the border-radius . The second one, you again didn't target the border-radius and you mixed up the timing.
I think that's right, I still have my training wheels on too. ;-)
-webkit-transition:border-radius 2s linear 1s;
Shuddha Chowdhury
3,817 PointsThanks for your clear explanation.Highly appreciated. :-)
3 Answers
James Barnett
39,199 PointsShuddha Chowdhury - If you are still a little vague on why your original code didn't work, check out this example of how CSS transitions work helpful.
Shuddha Chowdhury
3,817 PointsThanks
Shuddha Chowdhury
3,817 PointsThanks
Jasper Alblas
8,073 PointsTry adding -webkit- before every property, like so:
.box {-webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; }
Also: I don't think -webkit-duration is an css property, keep the transition-duration, but remove the 'duration' property.
Shuddha Chowdhury
3,817 PointsHey it didn't work :/* Complete the challenge by writing CSS below */
.box { border-radius: 15px; background: #4682B4; .box {-webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; } }
.box:hover { background: #F08080; border-radius: 50%; } Help please.
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsYou can also use the transition property on its own and add all items on one line. For example
-webkit-transition: all .6s linear 2s