Chrome 不响应 css 动画/转换，但 Firefox 工作正常答案

【问题标题】：Chrome not responding to css animation/transform, but Firefox works fineChrome 不响应 css 动画/转换，但 Firefox 工作正常
【发布时间】：2013-11-29 07:50:20
【问题描述】：

我正在尝试旋转一个 svg 元素。它在 Firefox 25 中运行良好，但在 Chrome 31（当前、最新、发布版本）中运行良好。这里是代码http://codepen.io/zshift/pen/Fvibj，为了便于阅读，如下所示：

<!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 上阅读的指南进行操作，但没有运气。知道我可能做错了什么吗？

【问题讨论】：

标签： html css google-chrome firefox svg

【解决方案1】：

您缺少transform 的前缀

-webkit-transform: rotate(0deg);

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

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

【讨论】：