为什么我的 CSS3 Transition 在 Firefox 中不起作用? [英] Why is my CSS3 Transition not working in Firefox?

问题描述

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

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

这是不工作的部分:

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

推荐答案

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

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.

这篇关于为什么我的 CSS3 Transition 在 Firefox 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！