CSS 为什么我的 CSS3 Transition 在 Firefox 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6084268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my CSS3 Transition not working in Firefox?
提问by Ben
It's working elsewhere on the site using the same CSS as far as I can tell. It works in Chrome. Here is the full page: anthonyotislawrence.com
据我所知，它在网站上的其他地方使用相同的 CSS 工作。它适用于 Chrome。这是完整页面： anthonyotislawrence.com
Here's the part that's not working:
这是不起作用的部分：
<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>
and the CSS
和 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;
}
回答by Ben
It looks like FF wont transition default values. They have to be declared on the original element before it will transition to the new properties.
看起来 FF 不会转换默认值。它们必须在原始元素上声明，然后才能过渡到新属性。
回答by SkipHarris
I had an issue similar to the OP where my transitions worked in every browser except Firefox. In my case I had intervals of zero seconds. I used just a 0 and not 0s. This caused the transition to not work at all in Firefox. I don't think this was the issue for the OP but posting here in case it helps someone else.
我有一个类似于 OP 的问题，我的转换在除 Firefox 之外的每个浏览器中都有效。就我而言，我的间隔为零秒。我只使用了 0 而不是 0。这导致转换在 Firefox 中根本不起作用。我认为这不是 OP 的问题，而是在此处发布以防对其他人有所帮助。
This does not work in Firefox:
这在 Firefox 中不起作用：
top 0 linear 1s
This works:
这有效：
top 0s linear 1s
