Overlaying an Image

HTML & CSS
16

I am having an issue with the height positioning of the birds on different devices. Here is the current code:

<div class="mountain-bird-wrapper">

	<div class="bird-container bird-container--one">
		<div class="bird bird--one"></div>
	</div>
	
	<div class="bird-container bird-container--two">
		<div class="bird bird--two"></div>
	</div>
	
	<div class="bird-container bird-container--three">
		<div class="bird bird--three"></div>
	</div>
	
	<div class="bird-container bird-container--four">
		<div class="bird bird--four"></div>
  </div>

  <div class="bird-container bird-container--five">
		<div class="bird bird--five"></div>
  </div>

</div>



.mountain-bird-wrapper {
  position: relative;
  margin: auto;
  display: block;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 15px;
  box-shadow: 5px 5px 20px 5px #333;
  width: 45vw;
  max-width: 45vw;
  padding-top: 66.6%;
  background-image: url(/imgMaster/nightSky.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}
/*----------------------*/

.bird.bird--one {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;

  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-delay: 0s;
}

.bird.bird--two {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;

  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
  animation-duration: 1.1s;
  animation-delay: -1s;
}

.bird.bird--three {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;

  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
  animation-duration: 1.05s;
  animation-delay: -0.25s;
}

.bird.bird--four {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;

  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
  animation-duration: 1.1s;
  animation-delay: -0.5s;
}

.bird.bird--five {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;

  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-delay: -0.7s;
}

.bird-container.bird-container--one {
  position: absolute;
  top: 30%;
  left: -25px;
  z-index: 5;
  transform: scale(0) translateX(-10vw);
  will-change: transform;

  animation-name: fly-right-one;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-delay: 0;
}

.bird-container.bird-container--two {
  position: absolute;
  top: 10%;
  left: -25px;
  z-index: 5;
  transform: scale(0) translateX(-10vw);
  will-change: transform;

  animation-name: fly-right-one;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 11s;
  animation-delay: 0s;
}

.bird-container.bird-container--three {
  position: absolute;
  top: 33%;
  left: -25px;
  z-index: 5;
  transform: scale(0) translateX(-10vw);
  will-change: transform;

  animation-name: fly-right-one;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 10.6s;
  animation-delay: 9.5s;
}

.bird-container.bird-container--four {
  position: absolute;
  top: 4%;
  left: -25px;
  z-index: 5;
  transform: scale(0) translateX(-10vw);
  will-change: transform;

  animation-name: fly-right-one;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 13s;
  animation-delay: 10.25s;
}

.bird-container.bird-container--five {
  position: absolute;
  top: 19%;
  left: -25px;
  z-index: 2;
  transform: scale(0) translateX(-10vw);
  will-change: transform;

  animation-name: fly-right-one;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 11s;
  animation-delay: 10s;
}

@keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

@keyframes fly-right-one {
  0% {
    transform: translateY(0%) translateX(-10vw) scale(0.5);
  }

  10% {
    transform: translateY(0%) translateX(0vw) scale(0.5);
  }

  20% {
    transform: translateY(0%) translateX(15vw) scale(0.5);
  }

  30% {
    transform: translateY(0%) translateX(30vw) scale(0.5);
  }

  40% {
    transform: translateY(0%) translateX(45vw) scale(0.5);
  }

  50% {
    transform: translateY(0%) translateX(55vw) scale(0.5);
  }

  60% {
    transform: translateY(0%) translateX(60vw) scale(0.5);
  }

  70% {
    transform: translateY(0%) translateX(70vw) scale(0.5);
  }

  80% {
    transform: translateY(0%) translateX(80vw) scale(0.5);
  }

  90% {
    transform: translateY(40%) translateX(90vw) scale(0.5);
  }

  100% {
    transform: translateY(0%) translateX(110vw) scale(0.5);
  }
}

I set the Top position for the birds in % because they are positioned Absolute in a Relative container. The % should work on all screens but it doesn’t. As the screen width narrows, the birds move downwards. As a partial workaround, I reset their heights on smaller screens. What point am I missing? Thanks.