为什么我的CSS3动画不能在Chrome或Safari中使用? [英] Why is my CSS3 animation not working in Chrome or Safari?
本文介绍了为什么我的CSS3动画不能在Chrome或Safari中使用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用翻译
动画,但是在Safari或Chrome中不起作用。我在做什么错了?
I'm using a translate
animation, but it doesn't work in Safari or Chrome. What am I doing wrong?
这是我的代码,和一个JSF实际应用:
<div id="animate"></div>
CSS
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 10%;
background: gray;
-webkit-animation:move 6s ease infinite;
-moz-animation:move 6s ease infinite;
animation: move 6s ease infinite;
}
@keyframes move {
50% {
transform: translate(800px, 0px);
}
}
@-webkit-keyframes move {
50% {
transform: translate(800px, 0px);
}
}
@-moz-keyframes move {
50% {
transform: translate(800px, 0px);
}
}
推荐答案
Webkit仍然需要 -webkit
前缀进行转换
:
Webkit still needs the -webkit
prefix for transform
:
@-webkit-keyframes move {
50% {
-webkit-transform: translate(800px, 0px);
}
}
演示: http://jsfiddle.net/MLhYS/3/
Demo: http://jsfiddle.net/MLhYS/3/
这篇关于为什么我的CSS3动画不能在Chrome或Safari中使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文