css3极光下奔跑的小熊

大致思路：

1、在一个div中设立四个子div，分别容纳星空、山川、北极熊以及极光。

2、对于星空，是将图片沿着X轴平铺，并为之添加transform: translateX(-50%);平移动画。

3、对于山川，为三张山川图片添加z-index层的叠放顺序，之后添加transform: translateX(-50%);平移动画与transform: scale(1.5);缩放动画。

4、对于北极熊，选取的图片是多帧图片，可以用animation: bear-run-in 3.6s step-end 0.6s forwards,bear-run 0.8s steps(8,end) 4.2s infinite forwards;逐帧显示。

@keyframes bear-run{
            0%{
                /* 第一个值是水平位置，第二个值是垂直位置。 */
                background-position: 0 0;
            }
            100%{
                background-position: -50em 0;
            }
        }

意义就是让长图片在可以容纳一帧的图片动起来，那么在盒子里显示的就是动画效果。

5、对于极光，就是选取五个不同的极光图，然后为之添加透明度会随时间变化而变化的动画，并为每个图片的动画添加动画延迟，以达到极光在动的感觉。

<div class="main">
  <div class="stage">
    <div class="space"></div>
    <div class="mountains">
      <div class="mountain mountains-1"></div>
      <div class="mountain mountains-2"></div>
      <div class="mountain mountains-3"></div>
    </div>
    <div id="bear" class="running"></div>
    <div class="lights">
      <div class="light light-1"></div>
      <div class="light light-2"></div>
      <div class="light light-3"></div>
      <div class="light light-4"></div>
      <div class="light light-5"></div>
      <div class="light light-6"></div>
      <div class="light light-7"></div>
      <div class="light light-8"></div>
      <div class="light light-9"></div>
      <div class="light light-10"></div>
      <div class="light light-11"></div>
      <div class="light light-12"></div>
      <div class="light light-13"></div>
      <div class="light light-14"></div>
    </div>
  </div>
</div>

css

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background: url('./img/bg-container.png') repeat-x;
  min-width: 1000px;
  min-height: 550px;
}

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.sence {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.space {
  width: 3840px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url('./img/bg-space.png') repeat-x;
  animation: moving 450s linear infinite;
}

.mountains {
  width: 100%;
  height: 17.78125em;
  position: absolute;
  left: 0;
  bottom: 0;
  background-origin: padding-box;
  overflow: hidden;
  animation: mountains-moving 0.8s ease-out forwards;
}

.mountain {
  width: 240em;
  position: absolute;
  left: 0;
  bottom: 0;
}

.mountains-1 {
  height: 10.5em;
  z-index: 3;
  background: url('./img/bg-mountain-1.png') repeat-x;
  background-size: auto 100%;
  animation: moving 100s linear 0.8s infinite;
}

.mountains-2 {
  height: 12em;
  z-index: 2;
  background: url('./img/bg-mountain-2.png') repeat-x;
  background-size: auto 100%;
  animation: moving 160s linear 0.8s infinite;
}

.mountains-3 {
  height: 17.78125em;
  z-index: 1;
  background: url('./img/bg-mountain-3.png') repeat-x;
  background-size: auto 100%;
  animation: moving 360s linear 0.8s infinite;
}

#bear.running {
  left: 50%;
  /* Steps(<number_of_steps>，<direction>) 两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化， 默认为 end。start 第一帧是动画结束的时候状态； end 第一帧是动画开始的时候状态; */
  /* animation: bear-run 0.8s steps(8,end) infinite; */
}

#bear {
  position: absolute;
  left: -4%;
  margin-left: -6.25em;
  bottom: 40px;
  z-index: 10;
  width: 6.25em;
  height: 3.125em;
  background: url('./img/bear.png')0 0 no-repeat;
  /* 相对于图片自身大小 */
  background-size: 50em 100%;
  animation: bear-run-in 3.6s step-end 0.6s forwards, bear-run 0.8s steps(8, end) 4.2s infinite forwards;
}

.lights {
  width: 68.22222em;
  height: 37.38888em;
  position: absolute;
  left: 50%;
  margin-left: -34.11111em;
  top: 0;
}

.light {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.light-1 {
  background: url(./img/bg-aurora-1.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 0.2s infinite;
}

.light-2 {
  background: url(./img/bg-aurora-2.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 0.7s infinite;
}

.light-3 {
  background: url(./img/bg-aurora-3.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 1.2s infinite;
}

.light-4 {
  background: url(./img/bg-aurora-4.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 1.7s infinite;
}

.light-5 {
  background: url(./img/bg-aurora-5.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 2.2s infinite;
}

.light-6 {
  background: url(./img/bg-aurora-4.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 2.7s infinite;
}

.light-7 {
  background: url(./img/bg-aurora-3.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 3.2s infinite;
}

.light-8 {
  background: url(./img/bg-aurora-2.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 3.7s infinite;
}

.light-9 {
  background: url(./img/bg-aurora-1.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 4.2s infinite;
}

.light-10 {
  background: url(./img/bg-aurora-2.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 4.7s infinite;
}

.light-11 {
  background: url(./img/bg-aurora-3.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 5.2s infinite;
}

.light-12 {
  background: url(./img/bg-aurora-4.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 5.7s infinite;
}

.light-13 {
  background: url(./img/bg-aurora-5.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 6.2s infinite;
}

.light-14 {
  background: url(./img/bg-aurora-4.png) no-repeat;
  background-size: 100% auto;
  animation: lights 7s linear 6.7s infinite;
}

@keyframes moving {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes mountains-moving {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bear-run {
  0% {
    /* 第一个值是水平位置，第二个值是垂直位置。 */
    background-position: 0 0;
  }

  100% {
    background-position: -50em 0;
  }
}

@keyframes lights {
  0% {
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  28% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes bear-run-in {

  /*第一个完步，时间间隔1.38888889%，图片间隔一个熊，位置间隔1.75%*/
  0% {
    background-position: 0em 0;
    left: -4%;
  }

  1.38888889% {
    background-position: -6.25em 0;
    left: -2.25%;
  }

  2.77777778% {
    background-position: -12.5em 0;
    left: -0.5%;
  }

  4.16666667% {
    background-position: -18.75em 0;
    left: 1.25%;
  }

  5.55555556% {
    background-position: -25em 0;
    left: 3%;
  }

  6.94444444% {
    background-position: -31.25em 0;
    left: 4.75%;
  }

  8.33333333% {
    background-position: -37.5em 0;
    left: 6.5%;
  }

  9.72222222% {
    background-position: -43.75em 0;
    left: 8.25%;
  }

  11.11111111% {
    background-position: -50em 0;
    left: 10%;
  }

  /*第二个完步开始，时间间隔1.66666667%，间隔一个熊，位置间隔1.5%。速度比第一个完步慢。*/
  11.11111111% {
    background-position: 0em 0;
    left: 10%;
  }

  12.77777778% {
    background-position: -6.25em 0;
    left: 11.5%;
  }

  14.44444444% {
    background-position: -12.5em 0;
    left: 13%;
  }

  16.11111111% {
    background-position: -18.75em 0;
    left: 14.5%;
  }

  17.77777778% {
    background-position: -25em 0;
    left: 16%;
  }

  19.44444444% {
    background-position: -31.25em 0;
    left: 17.5%;
  }

  21.11111111% {
    background-position: -37.5em 0;
    left: 19%;
  }

  22.77777778% {
    background-position: -43.75em 0;
    left: 20.5%;
  }

  24.44444444% {
    background-position: -50em 0;
    left: 22%;
  }

  /*第三个完步开始，时间间隔1.94444444%，间隔一个熊，位置间隔1.25%。速度比第二个完步慢。*/
  24.44444444% {
    background-position: 0em 0;
    left: 22%;
  }

  26.38888889% {
    background-position: -6.25em 0;
    left: 23.25%;
  }

  28.33333333% {
    background-position: -12.5em 0;
    left: 24.5%;
  }

  30.27777778% {
    background-position: -18.75em 0;
    left: 25.75%;
  }

  32.22222222% {
    background-position: -25em 0;
    left: 27%;
  }

  34.16666667% {
    background-position: -31.25em 0;
    left: 28.25%;
  }

  36.11111111% {
    background-position: -37.5em 0;
    left: 29.5%;
  }

  38.05555556% {
    background-position: -43.75em 0;
    left: 30.75%;
  }

  40% {
    background-position: -50em 0;
    left: 32%;
  }

  /*第四个完步开始，时间间隔2.22222222%，间隔一个熊，位置间隔1%。速度比第三个完步慢。*/
  40% {
    background-position: 0em 0;
    left: 32%;
  }

  42.22222222% {
    background-position: -6.25em 0;
    left: 33%;
  }

  44.44444444% {
    background-position: -12.5em 0;
    left: 34%;
  }

  46.66666667% {
    background-position: -18.75em 0;
    left: 35%;
  }

  48.88888889% {
    background-position: -25em 0;
    left: 36%;
  }

  51.11111111% {
    background-position: -31.25em 0;
    left: 37%;
  }

  53.33333333% {
    background-position: -37.5em 0;
    left: 38%;
  }

  55.55555556% {
    background-position: -43.75em 0;
    left: 39%;
  }

  57.77777778% {
    background-position: -50em 0;
    left: 40%;
  }

  /*第五个完步开始，时间间隔2.5%，间隔一个熊，位置间隔0.75%。速度比第四个完步慢。*/
  57.77777778% {
    background-position: 0em 0;
    left: 40%;
  }

  60.27777778% {
    background-position: -6.25em 0;
    left: 40.75%;
  }

  62.77777778% {
    background-position: -12.5em 0;
    left: 41.5%;
  }

  65.27777778% {
    background-position: -18.75em 0;
    left: 42.25%;
  }

  67.77777778% {
    background-position: -25em 0;
    left: 43%;
  }

  70.27777778% {
    background-position: -31.25em 0;
    left: 43.75%;
  }

  72.77777778% {
    background-position: -37.5em 0;
    left: 44.5%;
  }

  75.27777778% {
    background-position: -43.75em 0;
    left: 45.25%;
  }

  77.77777778% {
    background-position: -50em 0;
    left: 46%;
  }

  /*第六个完步开始，时间间隔逐步增多2.77777776%，2.77777777%等，间隔一个熊，位置间隔0.5%。速度比第五个完步慢。逐步慢下来*/
  77.77777778% {
    background-position: 0em 0;
    left: 46%;
  }

  80.55555556% {
    background-position: -6.25em 0;
    left: 46.5%;
  }

  83.33333333% {
    background-position: -12.5em 0;
    left: 47%;
  }

  86.11111111% {
    background-position: -18.75em 0;
    left: 47.5%;
  }

  88.88888889% {
    background-position: -25em 0;
    left: 48%;
  }

  91.66666667% {
    background-position: -31.25em 0;
    left: 48.5%;
  }

  94.44444444% {
    background-position: -37.5em 0;
    left: 49%;
  }

  97.22222222% {
    background-position: -43.75em 0;
    left: 49.5%;
  }

  100% {
    background-position: -50em 0;
    left: 50%;
  }
}

代码演示：