我正在使用translate
动画,但它在 Safari 或 Chrome 中不起作用。我究竟做错了什么?
这是我的代码,以及它的 JSFiddle:
HTML
<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);
}
}