I was doing some simple CSS transitions like transition: left 0.5s ease-in-out 1 and they were working just fine in Chrome but Firefox and Internet Explorer either wouldn’t use the transitions or they wouldn’t work the first time but subsequent times they would. So if I had an arrow that moved something the first click would jump the object while every click after the object would slide.

Simple fix, I wasn’t giving the object an initial value. I thought (incorrectly) that left and top were defaulted to 0 but really they’re null (or whatever CSS’s equivalent of null is).

So I had a declaration like:

#obj{position:absolute;transition: left 0.5s ease-in-out 1;}
#obj:hover{left:-100px;}

But since I never declared left:0 in the first line Firefox and Internet Explorer won’t transition the property. The transition not working the first time but all subsequent times was the same thing, I was setting an initially null property via JavaScript so the first time those browsers had nothing to transition from. Once set they did and everything worked fine.

So moral of the story, if you transition a property, make sure you give it an initial value, too.

UPDATE

Well, the above gets you almost there. You also need to make sure that your timing values also specify their unit. Instead of just 1 or even 0 you need to specify 1s or 0s. Firefox apparently doesn’t have a default unit (even for zero apparently).

#obj{position:absolute;transition: left 0.5s ease-in-out 1s;}
#obj:hover{left:-100px;}