Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Lawrence Lee
Lawrence Lee
4,240 Points

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

James Barnett
James Barnett
39,199 Points

Lawrence Lee -

The question requires you to do 4 things:

  1. create a transition for the border-radius property of '.box'
  2. Give the transition a duration of 2 seconds
  3. a delay of 1 second
  4. 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.

Lawrence Lee
Lawrence Lee
4,240 Points

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; ?

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.

James Barnett
James Barnett
39,199 Points

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.

Lawrence Lee
Lawrence Lee
4,240 Points

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

James Barnett
James Barnett
39,199 Points

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.

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

James Barnett
James Barnett
39,199 Points

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.

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?

James Barnett
James Barnett
39,199 Points

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:

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

James Barnett
James Barnett
39,199 Points

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.

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.

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

Lawrence Lee
Lawrence Lee
4,240 Points

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.

Lawrence Lee
Lawrence Lee
4,240 Points

Thanks for the help!

Welcome

Lawrence Lee
Lawrence Lee
4,240 Points

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?

Lawrence Lee
Lawrence Lee
4,240 Points

Thanks, Any simple responsive template that you would recommend?

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.

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!

James Barnett
James Barnett
39,199 Points

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.

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!

James Barnett
James Barnett
39,199 Points

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.

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

Thanks