无限 CSS 旋转在 Firefox 中有效，但在 Chrome 中无效
Posted
技术标签:
【中文标题】无限 CSS 旋转在 Firefox 中有效，但在 Chrome 中无效【英文标题】：Infinite CSS rotation working in Firefox but not in Chrome 【发布时间】：2014-02-09 21:58:44 【问题描述】：请有人帮助我。我从 css 动画和变换开始。我想要的是一个部门的无限旋转（里面有svg）。我的 css/html5 混合物在 Firefox 中运行良好，但在 Google Chrome 中却不行。我不确定问题出在哪里。这是链接：
Infinite CSS Rotation
第二步我想用 jQuery 控制动画。这又在 Chrome 中不起作用，但在 FF 中起作用。此扩展示例的链接：
Infinite CSS Rotation with jQuery control
任何线索将不胜感激。
【问题讨论】：
这个HTML5 SVG Not Working... 可能对你有帮助，因为我注意到文件是.svg。 【参考方案1】：使用css和html无限旋转分割
css代码是：
<style>
div
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
@-webkit-keyframes spin
0% -webkit-transform: rotate(0deg);
100% -webkit-transform: rotate(360deg);
</style>
HTML中的div
<html>
<body>
<div><img src="xyz.png" /></div>
</body>
</html>
在 div 中图片无限旋转
【讨论】：
【参考方案2】：试试这个，你忘了@keyframe和-webkit-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rotate Infinitely</title>
<style type="text/css">
#container
background-color:rgba(245, 168, 66, 0.4);
height:250px;
margin:50px auto;
width:250px;
#rotate1
-webkit-animation: rot_inf 5s infinite linear;
animation: rot_inf 5s infinite linear;
@keyframes rot_inf
from
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */
to
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */
@-webkit-keyframes rot_inf
from
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */
to
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */
</style>
</head>
<body>
<div id="container">
<div id="rotate1"><img src="http://testline.memetic-tv.net/css_rotate_infinite/img/cogwheel2.svg"></div>
</div>
</body>
</html>
【讨论】：
加前缀的版本应该在之前不加前缀的版本【参考方案3】：这是一个基于以下内容的简单示例： http://css-tricks.com/snippets/css/keyframe-animation-syntax/
在页面底部，它提供了一个 webkit 动画演示，我对其进行了编辑以演示 -webkit-animation-play-state
jsfiddle
简而言之，它可以通过检测当前动画状态来完成，并基于将-webkit-animation-play-state设置为running或paused
html:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
<a href="#">click</a>
js:
$('a').click(function()
var $p = $('.hi');
var state = $p.css("-webkit-animation-play-state")
console.log(state);
if (state == "running")
$p.css("-webkit-animation-play-state", "paused");
else
$p.css("-webkit-animation-play-state", "running");
return false;
)
css:
.hi
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
@-webkit-keyframes play
from background-position: 0px;
to background-position: -500px;
@-moz-keyframes play
from background-position: 0px;
to background-position: -500px;
@-ms-keyframes play
from background-position: 0px;
to background-position: -500px;
@-o-keyframes play
from background-position: 0px;
to background-position: -500px;
@keyframes play
from background-position: 0px;
to background-position: -500px;
【讨论】：
-ms- 从来不需要，IE10 是第一个支持 CSS 动画的 IE，它不需要前缀。 -moz- 在 Firefox 16 (2012) 中已弃用。 -o- 也可以跳过，因为 Opera 现在基于 Chromium 并使用 -webkit- 前缀。 基本上只需要@-webkit-keyframes和@keyframes。
是的，首先 Vicas 是对的，我忘记了（或愚蠢地省略了）关键帧部分的 -webkit- 前缀。这是主要问题。
然后，第二个 bfred.it 关于必要和不必要的前缀的说法是正确的。只有 -webkit- 是必需的。其他一切都是多余的。话虽如此，Panagiotis 使用动画播放状态作为条件语句基础的概念是一个很好的建议。谢谢大家。
首先，animation-play-state 仍然是实验性技术（根据 MDN link。在生产项目中使用它可能不是一个好的建议。以上是关于无限 CSS 旋转在 Firefox 中有效，但在 Chrome 中无效的主要内容，如果未能解决你的问题，请参考以下文章
CSS 动画在 chrome 中有效，但在 Firefox 和 Safari 中无效