CSS mozilla转换不起作用

我有一个简单的过渡，在平稳悬停时将页脚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/Chrome与Firefox中进行自我检查。转到页脚，将鼠标悬停在每个项目上

---

Firefox似乎需要先设置初始值。即使它是

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

---

虽然皮埃尔的回答以前对我有用，但我最近偶然发现了一种情况，事实并非如此。为了实现一个简单的循环图像滑块，我使用了以下方法

HTML:

和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/Chrome中非常有效（虽然我承认所有的

setTimeout

s都有点奇怪），但是虽然滑块在Firefox中技术上可以工作，但是在Firefox中没有可见的转换

接下来，我可以让它在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
}

---

非常感谢。我想Firefox需要看到它有两个州的top:defined？

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

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
}