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

Question

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

zsh*_*ift 1 html css firefox svg google-chrome

我正在尝试旋转一个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>

Run Code Online (Sandbox Code Playgroud)

我没有在Chrome中看到任何错误或警告,我正在按照我在http://www.w3schools.com/css/css3_animations.asp上阅读的指南,但没有运气.知道我可能做错了什么吗？

Answer 1

Dan*_*niP 6

你错过了前缀 transform

-webkit-transform: rotate(0deg);

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，2 月前
查看次数：	623 次
最近记录：	12 年，2 月前