我四处搜索，发现解决问题的方法似乎没有用。
我是 CSS3 动画的新手，请多多包涵。
我正在使用 CSS3 创建一个简单的动画，它在 IE 和 Firefox 中运行良好，但在 Chrome 中不起作用。我尝试了几种解决方案，但似乎都不起作用。
<style type="text/css">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#center {
width:100%;
height:50%;
position: relative;
}
@keyframes bounce {
0% { clip: rect(0px, 0px, 150px, 0px); }
100% { clip: rect(0px, 575px, 150px, 0px); }
}
@-moz-keyframes bounce {
0% { clip: rect(0px, 0px, 150px, 0px); }
100% { clip: rect(0px, 575px, 150px, 0px); }
}
@-webkit-keyframes bounce {
0% { clip: rect(0px, 0px, 150px, 0px); }
100% { clip: rect(0px, 575px, 150px, 0px); }
}
div#barra {
position:absolute;
-webkit-animation: bounce 4s infinite alternate;
-moz-animation: bounce 4s infinite alternate;
animation:bounce 4s infinite alternate;
}
table{
width:100%;
height:100%;
}
</style>
</head>
<script type="text/javascript">
function setup() {
var e = document.getElementById("barra");
e.className = "bounce";
}
</script>
<body onload="setup()">
<table>
<tr>
<td align="middle">
<div id="wrapper" style="display: inline-block; ">
<div id="center">
<div id="barra"><img src="barra.png"></div>
<div id="logo" ><img src="logo.png"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
谁能看出我做错了什么？ 顺便问一下，要让它在移动设备上运行，我应该做些什么吗？
这是一个 fiddle ，显示了问题:http://jsfiddle.net/yerathel27/pRWNv
最佳答案
您需要向 WebKit 中的属性添加初始剪辑以使其工作。
请参阅以下 fiddle :
我补充说:
clip: rect(0px, 575px, 150px, 0px);
到div#barra
关于css - WebKit 中的 CSS clip 属性动画问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16713459/