为什么我的 CSS3 动画在 Chrome 或 Safari 中不起作用？答案

【问题标题】：Why is my CSS3 animation not working in Chrome or Safari?为什么我的 CSS3 动画在 Chrome 或 Safari 中不起作用？
【发布时间】：2013-03-12 15:08:10
【问题描述】：

我正在使用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);
  }
}

【问题讨论】：

我正在使用 Chrome，当我查看小提琴时它运行良好。

标签： css translate-animation

【解决方案1】：

Webkit 仍然需要为 transform 加上 -webkit 前缀：

@-webkit-keyframes move {
   50% {
     -webkit-transform: translate(800px, 0px);
  }
}

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

【讨论】：