Chrome沒有響應css動畫/變換，但Firefox工作正常

我想旋轉一個svg元素。它在Firefox 25中運行良好，但在Chrome 31中無法運行（包括當前版本，最新版本）。下面是代碼http://codepen.io/zshift/pen/Fvibj，但爲方便閱讀如下圖所示：Chrome沒有響應css動畫/變換，但Firefox工作正常

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     @-webkit-keyframes spinners { 
      from { 
      transform: rotate(0deg); 
      } 
      to { 
      transform: rotate(360deg); 
      } 
     } 

     @keyframes spinners { 
      from { 
      transform: rotate(0deg); 
      } 
      to { 
      transform: rotate(360deg); 
      } 
     } 

     .spinner { 
      -webkit-animation: spinners 1s infinite linear; 
      -moz-animation: spinners 0.75s infinite linear; 
      -o-animation: spinners 1s infinite linear; 
     /* animation: spinners 1s infinite;*/ 
     } 
    </style> 
</head> 

<body> 
    <div> 
     <svg class="spinner" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
      <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> 
     </svg> 
    </div> 
</body>

我沒有在Chrome中看到任何錯誤或警告，而我跟隨導遊，我就http://www.w3schools.com/css/css3_animations.asp閱讀，但沒有運氣。任何想法我可能做錯了什麼？

來源

2013-11-15 zshift

你缺少前綴transform

-webkit-transform: rotate(0deg); 

@-webkit-keyframes spinners { 
from { 
    -webkit-transform: rotate(0deg); 
} 
to { 
    -webkit-transform: rotate(360deg); 
} 
}

演示http://codepen.io/anon/pen/fJCki

來源

2013-11-15 19:39:47 DaniP

事實上，Chrome已經沒有盡力去實現前綴的轉換尚未... –

Chrome沒有響應css動畫/變換，但Firefox工作正常

回答

相關問題