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

问题描述：

这是一个坚实的，跨浏览器的方式来实现转换吗？我不知道我可能会做错什么？为什么这个CSS过渡不起作用？

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

CSS过渡的 “一些” 浏览器 – blackhawk 2013-03-12 17:51:07

的Internet Explorer 10的工作和向上支持CSS3过渡。 – 2013-03-12 17:51:57

@blachawk我在windows8上使用Chrome，所以它应该工作，我的网页上的其他转换与类似的实现工作。 – dezman 2013-03-12 17:52:06

答

您需要在过渡声明摆脱, -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; 
}

答

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

你的权利，我很愚蠢，我只是看不到它！ – dezman 2013-03-12 17:54:47

不正确：“另外，您的转换只有在”停止“您的方式时才会起作用。”如果转换应用于'a'（没有伪），它总是适用。 'a：hover'仍然是'a'。像所有其他属性一样。 – Rudie 2013-03-12 17:55:58

答

您的-moz-transform正在导致问题。如果你只是想进行动画处理的color属性，你可以将其删除：

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

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

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

相关推荐