为什么我的 CSS3 过渡在 Firefox 中不起作用？答案

【问题标题】：Why is my CSS3 Transition not working in Firefox?为什么我的 CSS3 过渡在 Firefox 中不起作用？
【发布时间】：2023-03-05 19:46:02
【问题描述】：

据我所知，它在网站的其他地方使用相同的 CSS。它适用于 Chrome。这是完整的页面：anthonyotislawrence.com

这是不工作的部分：

<a class="socialBox linkedIn">
    <h3>LinkedIn</h3>
    <p>linkedin.com/anthonyotislawrence</p>
</a> 
<a class="socialBox facebook">
    <h3>Facebook</h3>
    <p>facebook.com/anthonyotislawrence</p>
</a>

和 CSS

.socialBox {
    display:block;
    min-width:200px;
    padding:4px 0 4px 55px;
    height:40px;
    line-height:20px;
    background-repeat:no-repeat;
    background-position:left center;
    position:relative;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    transition: all .5s ease-out;
    text-decoration:none;
    margin:30px 0;
}
.socialBox.linkedIn {
    background-image:url(../images/linkedin.png);
}
.socialBox.facebook {
    background-image:url(../images/facebook.png);
}
.socialBox:hover {
    left:15px;
    cursor:pointer;
}
.socialBox:hover p {
    text-decoration:underline;
}

【问题讨论】：

嗨，我在我的项目中几乎有与你相同的结构化 css，我在 FF 中也有同样的问题......我认为这与 background-image 属性有关......我改变了我的背景图片：url（../images/linkedin.png）；只是一个简单的背景，看看过渡是否有效并且确实有效...背景：#fff; ...这仍然没有解决它，但它只是表明它与在背景图像上使用过渡有关..我仍在寻找解决方案...

标签： firefox css

【解决方案1】：

我遇到了一个类似于 OP 的问题，我的转换在除 Firefox 之外的所有浏览器中都有效。就我而言，我的时间间隔为零秒。我只使用了 0 而不是 0。这导致转换在 Firefox 中根本不起作用。我认为这不是 OP 的问题，但在此处发布以防对其他人有所帮助。

这在 Firefox 中不起作用：

top 0 linear 1s

这行得通：

top 0s linear 1s

【讨论】：

【解决方案2】：

看起来 FF 不会转换默认值。它们必须在原始元素上声明，然后才能转换为新属性。

【讨论】：

我正在做这个答案中建议的事情，但仍然没有豆子。我正在尝试转换顶部和不透明度，但它没有动画。
感谢上帝.. 你为我节省了这么多时间。本，你是老板
谢谢。这也会影响 Webkit 浏览器。
@Ben 嗨，我在我的项目中实际上有与此相同的结构化 css，我在 FF 中也有同样的问题......我认为这与 background-image 属性有关......我改变了我的背景图像：url（../images/linkedin.png）；只是一个简单的背景，看看过渡是否有效并且确实有效...背景：#fff; ...这并不能解决问题，但它只是表明它与在背景图像上使用过渡有关..我仍在寻找解决方案...有什么想法吗？谢谢
@Ben me again.. 实际上我刚刚发现 background-image 不是动画属性...现在这很有意义..w3.org/TR/css3-transitions/#animatable-properties