<section class="hero hero__launch">
  <div class="launch-mask mask1"></div>
  <div class="launch part1"></div>
  <div class="launch-mask mask2"></div>
  <div class="launch part2"></div>
  <div class="launch-mask mask3"></div>
  <div class="launch part3"></div>
  <div class="launch-mask mask4"></div>
  <div class="launch part4"></div>
</section>

<div class="replay-holder">
  <button class="replay">Press me to replay</button>
</div>
.hero__launch {
  &.hero-active {
    .launch-mask {
      opacity: 0;
      &.mask1{
        transition: opacity .5s ease 1.2s;
      }
      &.mask2{
        transition: opacity .5s ease .8s;
      }
      &.mask3{
        transition: opacity .5s ease .4s;
      }
      &.mask4{
        transition: opacity .5s ease 0s;
      }
    }

    .launch.part1 {
      transition: background-position 6s ease 1.2s;
      background-position: 0 50%;
    }

    .launch.part2 {
      transition: background-position 6s ease .8s;
      background-position: 0 100%;
    }

    .launch.part3 {
      transition: background-position 6s ease .4s;
      top: 50%;
      background-position: 0 96%;
    }

    .launch.part4 {
      transition: background-position 6s ease 0s;
      background-position: 0 85%;
    }
  }

  .launch {
    background: url('https://i.ibb.co/yqLGM4t/relaunch.jpg') no-repeat;
    will-change: background-position;
  }

  .launch-mask {
    z-index: 5;
    opacity: 1;
    background: url('https://i.ibb.co/nnbLWhQ/relaunch-mask.jpg™') no-repeat;
    will-change: opacity;
  }

  .launch,
  .launch-mask {
    position: absolute;
    width: 100%;
    height: 25%;
    background-size: 100% 400%;

    &.mask1 {
      top: 0;
      background-position: 0 0;
    }

    &.part1 {
      top: 0;
      background-position: 0 0;
    }

    &.mask2 {
      top: 25%;
      background-position: 0 25%;
    }

    &.part2 {
      top: 25%;
      background-position: 0 25%;
    }

    &.mask3 {
      top: 50%;
      background-position: 0 50%;
    }

    &.part3 {
      top: 50%;
      background-position: 0 50%;
    }

    &.mask4 {
      top: 75%;
      background-position: 0 75%;
    }

    &.part4 {
      top: 75%;
      background-position: 0 75%;
    }
  }
}

.replay{
  transition: opacity 1s ease;
  font-size: 16px;
  display: none;
  position: absolute;
  top: 1%;
  right: 1%;
  z-index: 5;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: none;
  background: #fff;
  &:hover{
    opacity: 0.6;
  }
}
View Compiled
const $holder = $('.hero');
const $button = $('.replay');
const $window = $(window);
const ACTIVE = 'hero-active';

const animation = () => {
  const $delay = 1000;

  $window.on('load', () => {
    setTimeout(() => {
      $holder.addClass(ACTIVE);
    }, $delay);
  });
};

animation();

const replay = () => {
  const $delay = 5000;
  $window.on('load', () => {
    setTimeout(() => {
      $button.css({
        display: 'flex',
        width: '120px',
      });
    }, $delay);
  });
  $button.on('click', () => {
    $holder.removeClass(ACTIVE);
    $button.css({
      display: 'none',
    });
    setTimeout(() => {
      $holder.addClass(ACTIVE);
    }, 100);
    setTimeout(() => {
      $button.css({
        display: 'flex',
        width: '100px',
      });
    }, $delay);
  });
};

replay();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js