-moz-transition-duration不起作用？

下面你有我使用的嘗試，實現了3D動畫的代碼：
-moz-transition-duration不起作用？

<html> 
<head> 
    <title>3D CSS Animation</title> 
    <style> 
     #movieposters li { 
      display:inline; float:left; 
      -webkit-perspective: 500; 
      -webkit-transform-style: preserve-3d; 
      -webkit-transition-property: perspective; 
      -webkit-transition-duration: 0.5s; 
      transition-duration: 1s; 
      -moz-perspective: 500; 
      -moz-transform-style: preserve-3d; 
      -moz-transition-property: perspective; 

     width: 200px; 
     } 

     #movieposters li:hover { 
      -webkit-perspective: 5000; 
      -moz-perspective: 5000; 
      transition-duration: 1s; 
      transition-timing-function: linear; 
     width: 200px; 
     } 

     #movieposters li img { 
      -webkit-transform: rotateY(30deg); 
      -webkit-transition-property: transform; 
      transition-duration: 0.5s; 
      -moz-transition-duration: 1s; 
      -moz-transform: rotateY(30deg); 
      -moz-transition-property: transform; 

     width: 200px; 
     } 
     #movieposters li:hover img { 
     width: 200px; 
      -webkit-transform: rotateY(0deg); 
      -moz-transform: rotateY(0deg); 
     } 
    </style> 
</head> 
<body style="height: 100%" class="bluegradient"> 
    <ul id="movieposters"> 
     <li> 
      <img src="http://fc02.deviantart.net/fs36/i/2008/252/6/1/House_MD_DVD_covers_by_kdaver.jpg"/> 
     </li> 
    </ul> 
</body>

要看到預期的效果在Chrome中打開。在Firefox中，-moz-transition-duration似乎沒有效果。視角和旋轉值在懸停時會發生變化，但您可以使用任何動畫。

任何想法爲什麼？我正在使用最新版本的Firefox（10.0.2）。

來源

2012-03-03 Marius Bughiu

它與價值transform一個問題，在Mozilla它的前綴是-moz-transform。

#movieposters li img { 
    -moz-transition-property: -moz-transform 
}

這裏是小提琴：
http://jsfiddle.net/cadence96/82C2N/1/

來源

2012-03-04 03:16:19

-moz-transition-duration不起作用？

回答

相關問題