<section class="hero hero__bring">
  <div class="bring-mask mask1"></div>
  <div class="bring part1"></div>
  <div class="bring-mask mask2"></div>
  <div class="bring part2"></div>
  <div class="bring-mask mask3"></div>
  <div class="bring part3"></div>
  <div class="bring-mask mask4"></div>
  <div class="bring part4"></div>
  <div class="bring-mask mask5"></div>
  <div class="bring part5"></div>
</section>

<div class="replay-holder">
  <button class="replay">Press me to replay</button>
</div>
.hero{
  height: 100vh;
  width: 100%;
  position: relative;
}

.hero__bring {
  &.hero-active {
    .bring-mask {
      opacity: 0;
    }

    .bring.part1 {
    transition: background-position 4s ease-in-out 0s;
    background-position: 5% 0;
  }

  .bring-mask.mask1 {
    transition: opacity 1s ease-in-out 0s,
      background-position 1s ease-in-out;
    background-position: 35% 0;
  }

  .bring.part2 {
    transition: background-position 4s ease-in-out 0.3s;
    background-position: 25% 0;
  }

  .bring-mask.mask2 {
    transition: opacity 1s ease-in-out 0.3s,
      background-position 1.3s ease-in-out;
    background-position: 50% 0;
  }

  .bring.part3 {
    transition: background-position 4s ease-in-out 0.6s;
    background-position: 32% 0;
  }

  .bring-mask.mask3 {
    transition: opacity 1s ease-in-out 0.6s,
      background-position 1.6s ease-in-out;
    background-position: 65% 0;
  }

  .bring.part4 {
    transition: background-position 4s ease-in-out 0.9s;
    background-position: 40% 0;
  }

  .bring-mask.mask4 {
    transition: opacity 1s ease-in-out 0.9s,
      background-position 1.9s ease-in-out;
    background-position: 80% 0;
  }

  .bring.part5 {
    transition: background-position 4s ease-in-out 1.2s;
    background-position: 94% 0;
  }

  .bring-mask.mask5 {
    transition: opacity 1s ease-in-out 2.5s,
      background-position 3.5s ease-in-out;
    background-position: 80% 0;
  }
}

.bring {
  background: url('https://i.ibb.co/pZ6rgnp/rebring.jpg') no-repeat;
  will-change: background-position, opacity;
  transform: tranlateZ(0);
}

.bring-mask {
  z-index: 5;
  opacity: 1;
  background: url('https://i.ibb.co/Z2gmmxw/rebring-mask.jpg') no-repeat;
}

.bring,
.bring-mask {
  position: absolute;
  width: 13%;
  height: 100%;
  background-size: 800% 100%;

  &.mask1 {
    left: 0;
    background-position: 40% 0;
  }

  &.part1 {
    left: 0;
    background-position: 40% 0;
  }

  &.mask2 {
    left: 12.5%;
    background-position: 55% 0;
  }

  &.part2 {
    left: 12.5%;
    background-position: 55% 0;
  }

  &.mask3 {
    left: 25%;
    background-position: 70% 0;
  }

  &.part3 {
    left: 25%;
    background-position: 70% 0;
  }

  &.mask4 {
    left: 37.5%;
    background-position: 85% 0;
  }

  &.part4 {
    left: 37.5%;
    background-position: 85% 0;
  }

  &.mask5 {
    width: 50%;
    left: 50%;
    background-position: 95% 0;
    background-size: 200% 100%;
  }

  &.part5 {
    width: 50%;
    left: 50%;
    background-position: 100% 0;
    background-size: 200% 100%;
  }
}
}

.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