html - 背景图像上的 Css 动画在 Chrome 中不起作用

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/ !感谢外星人先生

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

Note: Just make sure you use -moz- as well...