CSS3 过渡在 Firefox 中不起作用答案

【问题标题】：CSS3 transition don't work in firefoxCSS3 过渡在 Firefox 中不起作用
【发布时间】：2013-09-30 12:36:44
【问题描述】：

在网站 (www.kkbio.co.uk) 中，我创建了一个脚本，将导航栏固定在顶部，并且徽标通过 CSS3 转换更改为更小的版本。它在谷歌浏览器中工作，但在 Firefox 中却不是。其他过渡也不起作用。我不知道为什么）请帮帮我：）

例如：

.navbar-brand {
    margin-right: 0px;
    padding: 0;
    width: 342px;
    height: 82px;
    margin-left: 15p‌x;
    margin-top: 15px;
    -moz-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    -webkit-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    -o-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
}

.fixed .navbar-brand {
    height: 74px;
    margin-top: -5px;
    background-position: 0 -82px!important;
}

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background-image:url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>

【问题讨论】：

欢迎来到 SO。请在此处发布您的脚本 - 帮助我们更快地解决您的问题是一种很好的做法。

标签： css transition background-position

【解决方案1】：

看来您在这里遇到了一些问题...

你已经使用了!important，这几乎总是一个不好的信号，并且你已经在同一个元素上使用了两次，所以哪个规则是更多 @ 987654323@?

尽可能避免使用!important。在这种情况下，您可以使用以下方法避免它：

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background-image: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>

而不是：

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background:url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>

如果您使用简写形式，例如 background，Firefox 将填写默认值，而 Chrome 会读取：

background: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);

火狐阅读：

background: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png) repeat scroll 0% 0% transparent;

Working Example

【讨论】：

感谢您的回答。我改进了所有的错误，你写的。但无论如何它都不起作用。也许我做错了什么？）
@swat-web 我添加了一个示例。它应该有助于让你走上正轨