背景图像上的 Css 动画在 chrome 中不起作用

【问题标题】：Css animation on background image is not working in chrome背景图像上的 Css 动画在 chrome 中不起作用
【发布时间】：2014-01-27 20:06:29
【问题描述】：

请告诉 chrome 的过渡/动画属性不同吗？还是我做错了什么？

：Fiddle

 @-webkit-keyframes water 
{ 0% {background-position: 0 0;}
100% {background-position: 100000% 0;}
}
@keyframes water {  
0% {background-position: 0 0;}
100% {background-position: 100000% 0;}
}

已解决：http://jsfiddle.net/aradhayaKansal/7cgkj/3/！感谢外星人先生

【问题讨论】：

除了 Mr.Alien 的修复之外，您的 linear-gradient 语法已经过时了：jsfiddle.net/7cgkj/2

标签： html css google-chrome css-animations

【解决方案1】：

你忘记了-webkit-animation: water 5000s linear infinite; 以及-webkit-animation: flow 5000s linear infinite; for webkit 仍然，chrome 需要它们，你可以检查this

Demo

#waterfall { 
  /* Other properties */
  -webkit-animation: flow 5000s linear infinite; /* <--- Here */
  animation: flow 3s forwards linear normal;
}

和

#water {
  /* Other properties */
  -webkit-animation: water 5000s linear infinite; /* <---- here */
  animation: water 5000s linear infinite;
}

注意：请确保您也使用-moz-...

【讨论】：