CSS mozilla过渡不起作用

Question

我有一个简单的过渡来将页脚img向上移动5px，但平滑过渡，但Firefox不适用平滑过渡。只有webkit。

我已经正确声明所有供应商前缀如下。

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

可以在Safari /铬VS Firefox的检查自己。转到页脚并将鼠标悬停在每个项目上。

www.rjam.es

Answer 1

火狐似乎需要先设置一个初始值。即使它是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

虽然皮埃尔的回答以前对我有用，但我最近偶然发现了一个没有的情况。实现一个简单的循环图像滑块，我使用以下内容。

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

和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 
} 

这个工作在Safari /铬很大（虽然我承认所有的setTimeout小号有点奇特， ），但是当滑块技术上在Firefox中工作时，没有可见的转换那里。

继Jim Jeffers' answer to a similar problem后，我在Safari/Chrome和Firefox中都能够顺利运行，并且它也大幅清理了我的javascript。

更新CSS：

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

更新的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 
}