CSS3动画属性练习-小熊跑跑

通过CSS的动画属性animation和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果（图片素材及源码见文末链接）

1、雪山动画的实现：
将素材图片作为背景图应用到“雪山”盒子里（.bg1 和 .bg2）
动画实现有 两种 方式：
a. 移动整个“雪山”盒子（盒子是绝对定位的，left的值从 0 变化到 -3840px）
注意：这里两个盒子的宽度都比背景图的宽度宽 一个屏幕宽度（3840px + 100%），这是为了动画循环播放时衔接顺畅

​ b. 移动背景图片
​ 注意：背景图片要设置为在水平方向重复，即 “repeat-x”，此时雪山盒子宽度至少和屏幕宽度一样即可

2、小熊动画的实现：
将素材图片作为背景图应用到“小熊”盒子里（.bear）
小熊动画包括两部分：
a. 小熊一直要保持的连贯奔跑效果
b. 小熊在开场时跑到中间
a部分的动画要通过移动背景图片来实现，这里使用的动画定时函数为 steps(8) ，动画重复次数为 无限次