爲什麼這個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; 
}

來源

2013-03-12 dezman

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

來源

2013-03-12 17:53:46

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

來源

2013-03-12 17:53:16

你的權利，我很愚蠢，我只是看不到它！ – 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/

來源

2013-03-12 17:54:04 Blender

爲什麼這個CSS過渡不起作用？

回答

相關問題