<svg id="blimp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 259">
  <g>
    <path d="M263.4,253.4V193.5A5.6,5.6,0,0,1,269,188H403.6a5.6,5.6,0,0,1,5.5,5.5v59.9a5.6,5.6,0,0,1-5.5,5.6H269A5.6,5.6,0,0,1,263.4,253.4Z" style="fill: #595959;fill-rule: evenodd"/>
    <polygon points="48.6 10.5 94.7 10.5 105.8 115.9 94.7 220.7 48.6 220.7 70.8 114.2 48.6 10.5" style="fill: #595959;fill-rule: evenodd"/>
    <polygon points="105.7 115.6 105.8 115.9 94.7 220.7 48.6 220.7 70.5 115.6 105.7 115.6" style="fill: #595959;fill-rule: evenodd"/>
    <path d="M338.1,0C478.8,0,509.7,51.7,509.7,115.6S478.8,231.1,338.1,231.1,0,179.4,0,115.6,197.3,0,338.1,0Z" style="fill: #ffa146;fill-rule: evenodd"/>
    <path d="M338.1,53.3c140.7,0,171.6,27.9,171.6,62.2s-30.9,62.2-171.6,62.2S0,149.9,0,115.6,197.3,53.3,338.1,53.3Z" style="fill: #f57f31;fill-rule: evenodd"/>
    <path d="M0,115.6H509.7c0,63.8-30.9,115.6-171.6,115.6S0,179.4,0,115.6Z" style="fill: #d82d33;fill-rule: evenodd"/>
    <path d="M0,115.6H509.7c0,34.4-30.9,62.2-171.6,62.2S0,149.9,0,115.6Z" style="fill: #ff4248;fill-rule: evenodd"/>
  </g>
</svg>
:root {
  --dist: 1000;
  
}

svg#blimp {
  width: 10%;
  --dur: 1s;
  animation: fly var(--dur) cubic-bezier(.06,.29,.47,.86) both;
}


@keyframes fly {
  100% {transform: translateX(calc(var(--dist) * 1px));}
}

@media screen and (min-width: 700px) {
  svg#blimp {
    --dur: 2s;
  }
}

@media screen and (min-width: 1000px) {
    svg#blimp {
    --dur: 3s;
  }
}

@media screen and (min-width: 1500px) {
   svg#blimp {
    --dur: 4s;
  }
}

body {
  background: #AECDFF;
  margin: 3em 1em;
}

View Compiled
var   width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var style = document.documentElement.style;
style.setProperty('--dist', width * .75);

// window.onresize = function(event) {
//   width = window.innerWidth
// || document.documentElement.clientWidth
// || document.body.clientWidth;
// };

Rerun