css3动画:屏幕无缝移动

Question

拿着一根棍子，我有一个底部有水的网站，我希望它不断地从左向右移动，给它一种无缝流动的水的错觉，类似于这个网站上的东西，只是不是悬停状态，只是水平的。

http://www.priteshgupta.com/2011/07/filling-a-glass-with-water-using-html5/

我拥有的html是一个简单的空div标记（所有内容都在css上）

<div id="water"></div>

css为：

#water {
  background: url(img/ocean.png);   
  margin-top: 1000px;
  width: 100%;
  height: 400px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  z-index: 3;
  animation: water 2s linear infinite;
}
@keyframes water {
  to {transform: translate(100px,0);}
  from {transform: translate(0px,0);}
}

图片如下所示：http://prntscr.com/1hwfnz

有什么最好的方法吗？任何帮助都将不胜感激。感谢

作为旁注，我尝试了这个css：

#water {
  background: url(img/ocean.png);   
  margin-top: 1000px;
  width: 200%;
  height: 400px;
  margin-left:-100px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  z-index: 3;
  animation: water 2s linear infinite;
}
@keyframes water {
to {transform: translate(100px,0);}
from {transform: translate(0px,0);}
}

我可以将溢出设置为隐藏x，这应该可以处理滚动问题，并允许水流动，问题是当水循环结束时，会有一个丑陋的跳跃切回到开始。

Answer 1

如果只将转换应用于water，那么您可以确切地看到动画的实际效果-只需将整个图像向右移动100px，跳回原始位置，然后再次

你需要的是类似的东西

#water {
  background: url(http://i.imgur.com/Lrvw1oc.png);   
  /*margin-top: 1000px;*/
  width: 100%;
  height: 200px;
  -webkit-transition: water 3s ease-out;
  -moz-transition: water 3s ease-out;
  -o-transition: water 3s ease-out;
  transition: water 3s ease-out;
  z-index: 3;
  animation: water 2000s linear infinite;
}
@keyframes water {  
  0% {background-position: 0 0;}
  100% {background-position: 100000% 0;}
}

移动背景位置，而不是整个图像。

这是一个演示

注意：2000年代和100000%是为了防止"丑陋的跳跃式削减"发生。我的实现可能有点错误