Why is my CSS3 animation not working in Chrome or Safari?

坚强是说给别人听的谎言 提交于 2020-07-06 04:59:32

问题


I'm using a translate animation, but it doesn't work in Safari or Chrome. What am I doing wrong?

Here's my code, 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);
  }
}

回答1:


Webkit still needs the -webkit prefix for transform:

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

Demo: http://jsfiddle.net/MLhYS/3/



来源:https://stackoverflow.com/questions/15355235/why-is-my-css3-animation-not-working-in-chrome-or-safari

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!