Question

这是实现转换的可靠的跨浏览器方式吗？我不知道我做错了什么？

HTML：

<div id="sideBar">
    <ul class="sideMenu">
        <li><a href="#">Beat of the Day</a></li>
        <li><a href="#">Cyborg DB</a></li>
        <li><a href="#">Hadiaris.com</a></li>
        <li><a href="#">DriversEd.com</a></li>
        <li>
            <a href="#">Controlco</a>           
            <ul>
                <li><a href="#">GGP</a></li>
                <li><a href="#">TVA</a></li>
            </ul>
        </li>
    </ul>
</div>

的CSS：

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -moz-transform .9s;
    -o-transition: color .9s, -moz-transform .9s;
    transition: color .9s, -moz-transform .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;
}

Answer 1

您需要在转换声明中删除, -moz-transform .9s。

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s;
    -webkit-transition: color .9s;
    -o-transition: color .9s;
    transition: color .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;
}

Answer 2

您的transform值均使用-moz-版本。此外，您的过渡只有在“取消”您拥有它的方式时才有效。如果将转换添加到两个规则，您也将在悬停上获得转换。

Updated fiddle

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -webkit-transform .9s;
    -o-transition: color .9s, -o-transform .9s;
    transition: color .9s, transform .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;

    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -webkit-transform .9s;
    -o-transition: color .9s, -o-transform .9s;
    transition: color .9s, transform .9s;
}

Answer 3

您的-moz-transform导致了问题。如果您只想为color属性设置动画，则可以将其删除：

    -moz-transition: color .9s;
    -webkit-transition: color .9s;
    -o-transition: color .9s;
    transition: color .9s; 
}

演示：http://jsfiddle.net/C83Yd/1/

为什么这个CSS过渡不起作用？

3 个答案: