Question

我正在尝试旋转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上阅读的指南，但没有运气。知道我可能做错了吗？

Answer 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

Chrome没有响应css动画/转换，但Firefox工作正常

1 个答案: