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

Posted November 10, 2013 5:20pm by

Code challenge, transition

Hello everyone, I am having problems with my code here and it is supposedly to be corrected. Here is the code I typed in:

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

The question is asking having the WebKit as part of the transition. But it says I am wrong? Does anyone have this problem?

9 Answers

November 10, 2013 6:42pm

Lawrence Lee -

The question requires you to do 4 things:

create a transition for the border-radius property of '.box'
Give the transition a duration of 2 seconds
a delay of 1 second
timing function that maintains a linear motion.

For reference here's your code:

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

You got 3 of 4 things, however you forgot the 1st one, create a transition for border-radius. Give that a try and let us know in the thread if you have any more questions.

November 10, 2013 6:54pm

Hey James,

I am not quite sure how to create a transition for border-radius, I was aware of that there is already of a border property in the hover psuedo element. border-radius: 50%;

Unless I have to type in -webkit-transition-border-radius, which i doubt this would not work? or Do i have to type in -webkit-transition: border-radius; ?

November 10, 2013 6:57pm

The border-radius is on the :hover state as you say. Then any transitions you are going to add go onto the non :hover part of the CSS. Then follow -webkit-transition: with the property you want the transition to effect so in your case Border-Radius. If stuck i would watch the video on this again until it sinks in. If you would like a cheat sheet then post your email and i will send you one, so you can refer to syntax when stuck.

November 11, 2013 1:16am

Lawrence Lee - If after viewing the video you are still stuck on CSS transitions check out this example of how CSS transitions work, if you still have questions afterwards let us know.

November 11, 2013 1:28am

Hey James, thanks for attaching this link. I got the missing step which i supposed to have done. Thanks for the help!

November 11, 2013 2:49am

It's always a good idea to check a reference if your syntax doesn't seem to be working, the guide I linked you to is one of the best for CSS.

November 10, 2013 5:38pm

You can do it all on 1 line like this code redacted this will pass the level. Don't forget to click the best answer and up vote for others to see solution and close the question off.

Thanks

November 10, 2013 6:35pm

Adam Sackfield - I've redacted your code, here on the forum our goal is to give help not answers. On the Treehouse forum we value the learning process - not the give you an answer process. In the future try giving an explanation and/or a hint instead of just giving an answer for someone to copy/paste.

Need more explanation on the distinction check this out.

November 10, 2013 6:38pm

Ok James Barnett. Thanks and i will bare this in mind for future posts. Any chance you can look at my latest Ruby question, see if you have an idea why its failing?

November 10, 2013 6:44pm

Adam Sackfield - I actually just saw glanced at it earlier. Unfortunately, I haven't taken the Ruby on Rails course yet, so I'm afraid I won't be of much help on that one. Sorry :frown:

November 10, 2013 6:45pm

No problem. Will wait for 1 of the tutors to pick up the thread. Grrrr

November 11, 2013 1:23am

Adam Sackfield -

I wrote up my advice about what to do when you get stuck in a thread a few months back. There's also a Treehouse blog on getting help when stuck.

November 11, 2013 1:27am

James Barnett

Thanks. Still waiting from some help from tutors on the Ruby thing restarted the process again which will take another few hours just to get to where i was. Think its issue with versions since the videos are that old they still want to do hover with jquery. Not holding my breath though as tutor was tagged in last post 4 days ago and not heard a peep.

November 10, 2013 5:31pm

Post a link to the actual question please and will be happy to help

November 10, 2013 5:32pm

Here is the actual 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.

November 10, 2013 5:34pm

http://teamtreehouse.com/library/websites/css-foundations-second-edition/transitions-and-transforms/transitions-webkit-only

November 10, 2013 5:42pm

Thanks for the help!

November 10, 2013 5:43pm

Welcome

November 10, 2013 6:06pm

This is might be off topic, Do you know if there are any template or PSD of design for others to practice front-end practice?

November 10, 2013 6:07pm

Here are few simple sites to re-create:

http://themeforest.net/item/zwin-responsive-vcard-template/full_screen_preview/1970657 http://themeforest.net/item/clean-cv-resume-html-template-4-bonuses/full_screen_preview/82474 http://themeforest.net/item/dotme-business-card-theme/full_screen_preview/99526

November 10, 2013 6:17pm

Thanks, Any simple responsive template that you would recommend?

November 10, 2013 6:20pm

You could add the media queries to the templates above thus making them responsive. Im not a designer so my way of training development is to just throw things together fast a simple design and try to do things like sidebar pop out like this site using jquery or responsive stuff using the grid.css from this site.

November 11, 2013 7:31pm

Having very similar problem. When I use the webkit prefix on the four steps (property, duration, timing-function, and delay) the "preview" makes both transitions (background and border-radius) immediately. If I add the un-prefixed version of code the preview works as described but I'm still getting the red banner of shame... Here's the css I'm using;

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

any advice would be helpful. Thanks!

November 11, 2013 8:39pm

Brian Champion -

TL;DR - According to caniuse.com transitions were un-prefixed for webkit with Chrome 26, which came out in May '13 which I believe was after the code challenge was made.

That's a little tricky to explain. CSS doesn't have any real error messages or debugging built into the language, to help students learn, Treehouse teachers write a list of obvious things which code challenge engine for checks.

The preview on the other hand rendered by an actual browser engine. Browser engines like webkit are developed a pretty fast clip and CSS3 properties were only available as prefixed can become unprefixed a few months later.

November 11, 2013 9:05pm

Thank you James. I can totally understand that keeping up with this stuff has to be a difficult job at best.
So, in the code challenges, is the preview rendered using whatever browser is running on each student's pc? The reason I ask is that I'm using Firefox 25.0 and I'm wondering whether I should expect some glitches along the way. I can handle that, but I might be able to move past a challenge without getting obsessive about why it isn't working. Is there a suggested browser for students to use while taking the courses? Thanks Much!

November 11, 2013 9:26pm

Brian Champion -

> The preview rendered using whatever browser is running on each student's pc

That's my guess.

> Is there a suggested browser for students to use while taking the courses?

Apart from some the CSS3 stuff that requires prefixes in the CSS Foundations course, your browser choice shouldn't make a difference. However just like in the real world, if some CSS doesn't work like you expect cross check with another browser to see if it's your code or a cross-browser issue. If you suspect a cross-browser issue check out caniuse.com and CSS3please.

November 10, 2013 5:34pm

Need the link so that i can get in the editor and ensure the answer i give is correct. Before sending it.

Thanks

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.