背景图像上的Css动画不适用于镀铬

Question

请告诉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/！感谢Alien先生

Answer 1

您忘记了-webkit-animation: water 5000s linear infinite;以及-webkit-animation: flow 5000s linear infinite; 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- ...