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
Travis Klein
2,854 PointsTransition-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
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.
Giovanni CELESTE
20,961 PointsWhich 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 ^^).
Travis Klein
2,854 PointsIt doesnt work on any for me, including chrome... must be my computer :(
Giovanni CELESTE
20,961 PointsDon'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.
Travis Klein
2,854 PointsVersion 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.
Travis Klein
2,854 PointsVersion 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.
Giovanni CELESTE
20,961 PointsStill 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;"
Travis Klein
2,854 PointsOK, 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
12,860 PointsDon'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.
Travis Klein
2,854 PointsDid it. Still not working lol... im goin nuts over here!!
Travis Klein
2,854 PointsTravis Klein
2,854 PointsJames 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 :)
Travis Klein
2,854 PointsTravis Klein
2,854 PointsI 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.
Travis Klein
2,854 PointsTravis Klein
2,854 Pointsok seriously why lol?? I was kidding about the smooch.
James Barnett
39,199 PointsJames Barnett
39,199 PointsI 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