请有人帮助我。我从 css 动画和变换开始。我想要的是一个部门的无限旋转（里面有svg）。我的 css/html5 混合物在 Firefox 中运行良好，但在 Google Chrome 中却不行。我不确定问题出在哪里。这是链接：
第二步我想用 jQuery 控制动画。这又在 Chrome 中不起作用，但在 FF 中起作用。此扩展示例的链接：
Infinite CSS Rotation with jQuery control
任何线索将不胜感激。
【问题讨论】：
标签： css google-chrome firefox animation transform
使用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" height="200px" width="200px"/></div>
</body>
</html>
在 div 中图片无限旋转
【讨论】：
试试这个，你忘了@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 width="250" height="250" alt="cog" src="http://testline.memetic-tv.net/css_rotate_infinite/img/cogwheel2.svg"></div>
</div>
</body>
</html>
【讨论】：
这是一个基于以下内容的简单示例： http://css-tricks.com/snippets/css/keyframe-animation-syntax/
在页面底部，它提供了一个 webkit 动画演示，我对其进行了编辑以演示 -webkit-animation-play-state
简而言之，它可以通过检测当前动画状态来完成，并基于将-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。