Mozilla CSS transition not working

Question

I have a simple transition to img up 5px footer shift with smooth movement, however Firefox does not apply a smooth transition. Webkit only.

I correctly formulated all the vendor prefixes, as shown below.

#footer img { margin-left:8px; -webkit-transition:all .1s ease; -moz-transition:all .1s ease; -ms-transition:all .1s ease; transition:all .1s ease; cursor:pointer; #footer img:hover { position:relative; top:-5px; 

You can test yourself in Safari / Chrome VS Firefox. Go to the footer and just hover over each item.

www.rjam.es

Answer 1

Firefox seems to require an initial value first. Even if it is 0 .

 #footer img { margin-left:8px; -webkit-transition:all .1s ease; -moz-transition:all .1s ease; -ms-transition:all .1s ease; transition:all .1s ease; cursor:pointer; position:relative; top:0; } #footer img:hover { top:-5px; } 

Answer 2

Although Pierre’s answer worked for me earlier, I recently came across a situation where this did not happen. Introducing a simple, circular image slider, I use the following.

HTML:

 <ul id="slides"> <li class="active"> <img src="/.../0.jpg"> <p>Caption</p> </li> <li class="active"> <img src="/.../1.jpg"> <p>Caption</p> </li> <!-- and so on --> </ul> 

CSS

 #slides { position: relative; } #slides li { position: absolute; top: 0; display: none; opacity: 0; -moz-transition: opacity 1s; } #slides li.active { display: block; opacity: 1; } 

and jQuery:

 $(function(){ animateSlide(); }); function animateSlide(){ setTimeout(function(){ var current = $('#slides li.active'); var next = current.next(); // If there is no next, use the first li if(!next.length){ next = $('#slides li:first'); } // Ensure both are displayed as block, to allow the opacity transition to show current.add(next).css('display', 'block'); current.removeClass('active'); setTimeout(function(){ next.addClass('active'); setTimeout(function(){ current.css('display', 'none'); // Avoid elements overlapping each other animateSlide(); // Loop }, 1000); // The duration of the transition }, 1); // Workaround for letting the "next" var to render as block properly before applying the class which triggers the transition }, 6000); // Change image every 6 seconds } 

This works fine in Safari / Chrome (although I admit it is somewhat fancy with all setTimeout s), but while the slider was technically working in Firefox, there was no visible transition.

Following Jim Jeffers answer to a similar problem , I was able to get it to work in both Safari / Chrome and Firefox, and also significantly cleared my JavaScript.

Updated CSS:

 #slides li { position: absolute; top: 0; height: 0; opacity: 0; -moz-transition: opacity 1s; } #slides li.active { height: auto; opacity: 1; } 

Updated jQuery:

 function animateSlide(){ setTimeout(function(){ var current = $('#slides li.active'); var next = current.next(); // If there is no next, use the first li if(!next.length){ next = $('#slides li:first'); } current.removeClass('active'); next.addClass('active'); animateSlide(); // Loop }, 6000); // Change image every 6 seconds }