为什么我的CSS3动画无法在Chrome或Safari中运行？

Question

我正在使用translate动画，但它在Safari或Chrome中无效。我做错了什么？

这是我的代码and a JSFiddle of it in action：

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);
  }
}

Answer 1

Webkit仍然需要-webkit的{​​{1}}前缀：

transform

演示：http://jsfiddle.net/MLhYS/3/