我正在尝试旋转 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 上阅读的指南进行操作，但没有运气。知道我可能做错了什么吗？
最佳答案
您缺少 transform 的前缀
-webkit-transform: rotate(0deg);
@-webkit-keyframes spinners {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
关于html - Chrome 不响应 css 动画/转换，但 Firefox 工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20009218/