html - 过渡不适用于 Firefox

Question

我正在运行这段代码，通过将鼠标悬停在另一个出现的图像上，它有一个转换代码。奇怪的是，它不适用于 FireFox，但适用于 Opera 和 Google Chrome。我希望你能帮助我，这是我的第一篇文章。

CSS:

.class1 {
    visibility: visible
}

.class2 {
    background: url(image2); 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; height: 173px
}

.class1:hover .class2 {
    background: url(image1); 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; height: 173px
}

HTML:

<div class="class1" style="width: 280px; float:center">
    <p style="float:center" class="class2">
    </p>
</div>

似乎不适用于 Firefox。图像在那里并且过渡有效，在 Firefox 上它工作得很奇怪，你将鼠标悬停在它上面并且它没有过渡，只是直接改变图像。

Answer 1

如果您使用带有供应商前缀的 css3，您还需要添加实际的 css3 等效项，而不仅仅是前缀，它们是采用标准时的权宜之计。

最新的 Firefox 已经采用 css3 作为标准(没有前缀也不支持)，但是前缀仍然支持旧版本，所以使用它们并没有错，但它们只是一种后备。

<style type="text/css" media="screen">
.class1 {visibility: visible}
.class2 {
    background: red; 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; 
    transition:all .9s ease; 
    height: 173px}
.class1:hover .class2 {
    background:yellow; 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; 
    transition:all .7s ease; 
    height: 173px
    }
</style>

<div class="class1" style="width: 280px; float:left;"><p style="float:center<class="class2">HJKHKSF</p></div>

我取出图像并使用颜色。

没有进一步的评论:经过一些研究后，firefox 似乎不支持背景图像上的过渡动画