CSS背景动画和多重背景动画

CSS背景动画是一项非常神奇的技术，使用得当的话，它可以制作出非常炫酷的效果。过去制作这种动画效果通常是使用js来实现。现在，各大浏览器对CSS3的支持已经非常广泛，我们可以直接使用CSS来制作背景动画了。

制作CSS背景动画

这个效果是通过background position属性来移动背景图片实现的。在这个效果中，我们使用CSS animations来替代CSS transitions。下面的代码中都没有使用浏览器厂商的前缀。

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}                              
                            

在使用@keyframes定义好动画效果之后，我们就可以在指定的元素上使用这个动画效果。

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

通过上面的代码，现在白云背景图片会在#animate-area元素中从左到右移动，整幅图片在40秒时间内完成移动，并且无线循环下去。

是不是非常简单呢？不必使用js也能完成这样的效果。虽然要添加各个浏览器厂商的前缀是一件很烦的事情，但是CSS代码还是非常简洁易懂的。

制作CSS多重背景动画

CSS背景动画受人们喜爱的原因是它们的代码简洁，效果优雅，且不必使用多余的元素。我们能不能制作CSS多重背景的动画效果呢？答案是肯定的！按照国际惯例，先来看看效果。

我们可以在background-image属性中用逗号来隔开多张图片，这样能同时在渔歌元素中引入多张图片。然后用background-position属性来分别指定每张图片的位置。

.animate-area { 
  background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
  background-position: 20px -90px, 30px 80px, 0px 0px;
  background-repeat: no-repeat, no-repeat, repeat-x;
}                              
                            

这里要注意的是，你想要放在最上面的图片要写在图片列表的最前面。

移动背景图片需要修改图片的background-position属性，这里同样使用逗号来分割每张图片的位置。

@keyframes animatedBird {
  from { background-position: 20px 20px, 30px 80px, 0 0; }
  to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
    
.animate-area { 
  animation: animatedBird 4s linear infinite;
}                              
                            

到这里，多重图片背景动画的效果就做好了。三张图片元素会同时在一个元素中执行动画效果。

但是，这种这种多重背景动画的方法是有缺陷的。你不可以单独的修改某张图片的background-position，并且所有的背景图片的动画时间都是相同的。多重背景动画不能使用CSS的选择器来完成，但是这些制作方法也可以开拓你的思路，期待你能做出更好的多重背景动画效果。