-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不起作用？

回答

相关问题