css3演示

漂浮的云 观看演示 英文：davidwalsh.

背景云图片以40秒一次的速度顺滑优雅的从左漂移到右，而且无缝的和下一次循环对接，这样无限循环漂浮下去。

/*使用CSS3中的animation实现背景云图片以40秒一次的速度顺滑优雅的从左漂移到右，并无限循环漂浮*/
@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

/*应用到一个具有背景图的页面元素上*/
#animate-area {
  width: 560px;
  height: 400px;
  background-image: url(bg-clouds.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 40s linear infinite;
}