HTML

<div class="wrapper">
  <div class="hero">
    <div class="hero__bg01"></div>
    <div class="hero__bg02"></div>
    <div class="hero__bg03"></div>
    <div class="hero__character"></div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.hero {
  position: relative;
  width: 100%;
  height: 550px;
  background: url(images/sky.png) center center /300px 550px;
}

.hero__bg01,
.hero__bg02,
.hero__bg03 {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.hero__bg01 {
  height: 550px;
  margin: auto;
  background: url(images/star.png) center center /300px 550px;
  animation: hero__bg01 80s linear infinite;
}

.hero__bg02 {
  height: 273px;
  margin: auto;
  background: url(images/city.png) center center /1062px 273px;
  animation: hero__bg02 50s linear infinite;
}

.hero__bg03 {
  height: 143px;
  margin: auto;
  background: url(images/house.png) center center /801px 143px;
  animation: hero__bg03 20s linear infinite;
}

.hero__character {
  position: absolute;
  top: 145px;
  right: 0;
  left: 0;
  width: 193px;
  height: 78px;
  margin: auto;
  background: url(images/santa.png) center center /193px 78px;
}

@keyframes hero__bg01 {
  0% {background-position: 0 0;}
  100% {background-position: -300px 0;}
}

@keyframes hero__bg02 {
  0% {background-position: 0 0;}
  100% {background-position: -1062px 0;}
}

@keyframes hero__bg03 {
  0% {background-position: 0 0;}
  100% {background-position: -801px 0;}
}

끝말