css - 为什么这个 CSS 转换不起作用？

Question

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

Fiddle

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