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

Transition-duration NOT working???

http://www.travis-klein.com/SimpleTransition.html

I must have tried for 3 hours but I cannot figure this out- the boxes are still "snapping"... Funny thing is, the block smoothly slide in the browser on my phone, but if I use my desktop, it doesn't matter what browser I do it in, it just will not work... It was working for about 10 minutes, but then just stopped. I rebooted my computer twice, still nothing.is it just on my browser/computer?? Please help!!!

4 Answers

James Barnett
James Barnett
39,199 Points

#TIL If you want to use a transition using a positioned attributed (top, bottom, left, right) in Firefox then you must first position the element.

To do that in your case, add in:

.wrapper div {
  top: 0;
  left: 0;
  position: relative;
}

I made you a working demo on codepen.

James while I could kiss you for that answer, I fear it only got me half way... while that DID to the trick of finally getting the divs to slide nicely in Firefox it caused another problem: Now only the top two boxes do anything at all, in either browser! I'm sure it's just one more simple step after that, but again, I got nothin :)

I GOT IT!!!!! AH HAHAHA!! ok, so you have to give a negative/opposite value to the two bottom divs (The yellow and the Green)... The big question is why?? After that, you can have your smooch.

ok seriously why lol?? I was kidding about the smooch.

James Barnett
James Barnett
39,199 Points

I looked at it, and I can't seem to figure out exactly why it works that way. I spent an hour or so experimenting with a bunch of different positioning combinations.

http://codepen.io/jamesbarnett/pen/tzqLh

Which browser did you use? :) On Firefox it doesn't work, on chrome it does. Check your cross-browser css (you used the webkit-transition), add transition property for other browsers :). (and check on different browsers when you develop for the web ^^).

It doesnt work on any for me, including chrome... must be my computer :(

Don't think so :), which version of chrome are you using? Well, even if you have the correct one, your css is still missing your transition code for other browsers.

Version 32.0.1700.72 for Chrome, and the latest as well for Firefox (Which I just added the -moz- prefix, STILL doesn't work for me on it) as well... If it works for you now on Firefox there has GOT to be something wrong with my computer.

Version 32.0.1700.72 for Chrome, and the latest as well for Firefox (Which I just added the -moz- prefix, STILL doesn't work for me on it) as well... If it works for you now on Firefox there has GOT to be something wrong with my computer.

Still doesn't work on Firefox ^^. Css has nothing to do with your computer, not matter how you do it :D.

Ok, got it (google is my friend): for Firefox, you have to set your default value. Here, for your .red css, you add "left: 0;"

OK, so I deleted both Chrome and Firefox from my computer and reinstalled them both (I've added the -moz- prefix to my code on the page)... Chrome seems to be working ok now but Firefox is STILL "snapping" the boxes even with the prefix!! I'm going bald from pulling my hair out :(

Dennis Skoko
Dennis Skoko
12,860 Points

Don't forget to add the unprefix property transition-duration. Add this to the code:

transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;

That's why it didn't work on Firefox, Firefox support the unprefix version of transition.

Did it. Still not working lol... im goin nuts over here!!