用平滑的结果对CSS背景位置进行动画处理（亚像素动画）

用平滑的结果对CSS背景位置进行动画处理（亚像素动画）

看看这个例子：

#content {  height: 300px;  text-align: center;  font-size: 26px;  color: #000;  position:relative;}.bg{  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;  z-index: -1;  background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;  animation-name: MOVE-BG;  animation-duration: 100s;  animation-timing-function: linear;  animation-iteration-count: infinite;}@keyframes MOVE-BG {   from {     transform: translateX(0);   }   to {     transform: translateX(-187%);   }}<div id="content">Foreground content  <div ></div></div>