小编zsh*_*ift的帖子

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

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

html css firefox svg google-chrome

zsh*_*ift

lucky-day

1
推荐指数

1
解决办法

623
查看次数