现在各大浏览器的官网是越做越炫酷了。比如百度浏览器官网，虽然我不用这个浏览器呢（只用原版Chrome，不为其他，只因国内换壳的浏览器内核版本太低，跟Chrome官方始终有差距）。但是不得不佩服百度的设计师，页面动画做的确实漂亮。
其实这熊熊就是一个png图，长长的，把熊熊奔跑的动作分解成了几帧。（没法改背景色，大家可以下这个图在自己电脑上看下）
整个百度浏览器官网动画基本上都是CSS3结合JS去实现的。
今天我们就用CSS3实现这个小熊奔跑的动画。
第一步：先用一个div，制作熊熊本体。图片作为这个熊熊的背景添加。
<!-- 熊熊标签 --><div class="bear"></div><!-- 熊熊标签 end -->
body{background: #22184a;}.bear{width: 200px;height: 100px;background:url(images/bearrun.png) repeat-x;}
说明下：
1、div的宽高值。整个熊熊图片是1600px，高100px，里面有8帧。所以，div.bear的高是100px，宽200px。
2、背景一定要 repeat-x。垂直方向的重复没必要，但是一定不能 no-repeat。 因为，这个熊熊动画本质上是图片的轮流出现实现的。如果 no-repeat，图片移动完毕后，会出现空当。
第二步：制作小熊出现的动画。
@keyframes bearComing{0%{transform: translateX(0);}100%{transform: translateX(600px);}}
这个动画就是让熊熊移动600px。把它应用在 div.bear 上。
.bear{width: 200px;height: 100px;background:url(images/bearrun.png) repeat-x;animation:bearComing 7s both;}
第三步：让熊熊奔跑起来。熊熊的奔跑其实就是挨个出现图片背景的不同帧。但是图片的出现不是循序渐进的，而是200px 400px 这样间隔 帧图宽度倍数出现的。听起来很复杂，其实很简单。先写上奔跑动画。
@keyframes bearRun {0%{background-position: 0 0;}100%{background-position: -1600px 0;}}
说明下：这里利用background-position 控制背景图位移。 为什么是 -1600px？ 因为图片要往左位移。1600 刚好是图片的宽度。
把动画应用在 div.bear 上，完工~！
.bear{width: 200px;height: 100px;background:url(images/bearrun.png) repeat-x;animation:bearComing 7s both, bearRun 1s infinite steps(8);}
animation的steps 就是要分几步展示图片。图片中共有8帧，所以 就写 数字 8 。
从这里也可以看出来，animation 可以同时运用多个动画，多个动画之间用逗号隔开。
百度浏览器官网上的“极光”，背景的“远山”动画都是这个原理的，大家有兴趣可以高仿下。
