<section class="hero hero__transform">
  <div class="transform-mask mask"></div>
  <div class="transform-bg"></div>
  <div class="transform part1"></div>
  <div class="transform part2"></div>
  <div class="transform part3"></div>
  <div class="transform part4"></div>
  <div class="transform part5"></div>
  <div class="transform part6"></div>
  <div class="transform part7"></div>
  <div class="transform part8"></div>
</section>

<div class="replay-holder">
  <button class="replay">Press me to replay</button>
</div>
.hero__transform {
  &.hero-active {
    .transform-mask {
      transition: opacity 2.5s linear;
      opacity: 0;
    }

    .transform.part1 {
      transition: top 2.5s linear,
        background-position 2.2s linear;
      background-position: 2% 69%;
      top: 0%;
    }

    .transform.part2 {
      transition: background-position 2.5s linear;
      background-position: 16% 55%;
    }

    .transform.part3 {
      transition: top 2.5s linear;
      top: -6%;
    }

    .transform.part4 {
      transition: top 2.5s linear,
        background-position 2.2s linear;
      background-position: 41% 65%;
      top: -5%;
    }

    .transform.part5 {
      transition: top 2.5s linear;
      top: 50%;
    }

    .transform.part6 {
      transition: top 2.5s linear,
        background-position 2.2s linear;
      top: -5%;
      background-position: 70.5% 60%;
    }

    .transform.part7 {
      transition: top 2.5s linear,
        background-position 2.2s linear;
      top: 0;
      background-position: 84% 0;
    }

    .transform.part8 {
      transition: top 2.5s linear,
        background-position 2.2s linear;
      top: 15%;
    }
  }

  .transform,
  .transform-bg {
    background: url('https://i.ibb.co/QCXhJ1b/retransform.jpg') no-repeat;
  }

  .transform-mask {
    position: absolute;
    z-index: 5;
    opacity: 1;
    background: url('https://i.ibb.co/mSsQbrC/retransform-mask.jpg') no-repeat;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
  }

  .transform-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
  }

  .transform {
    position: absolute;
    width: 12%;
    height: 25%;
    background-size: 833.33% 400%;
    will-change: top, background-position;
    transform: translateZ(0);
    &.part1 {
      left: 2%;
      top: -40%;
      height: 60%;
      background-size: 833.33% 166.66%;
      background-position: 2% -150%;
    }

    &.part2 {
      left: 14%;
      bottom: 0;
      height: 30%;
      background-size: 833.33% 333.33%;
      background-position: 16% 99%;
    }

    &.part3 {
      left: 26%;
      height: 53%;
      top: 20%;
      background-size: 833.33% 188.68%;
      background-position: 29% 33%;
    }

    &.part4 {
      left: 38%;
      top: -20%;
      height: 60%;
      background-size: 833.33% 166.67%;
      background-position: 41% -50%;
    }

    &.part5 {
      left: 50%;
      top: 40%;
      height: 50%;
      background-size: 833.33% 200%;
      background-position: 57% 80%;
    }

    &.part6 {
      height: 60%;
      left: 62%;
      top: 15%;
      background-size: 833.33% 166.67%;
      background-position: 70.5% 30%;
    }

    &.part7 {
      left: 74%;
      top: 0;
      height: 80%;
      background-size: 833.33% 125%;
      background-position: 84% -50%;
    }

    &.part8 {
      left: 86%;
      top: 0;
      height: 70%;
      background-size: 833.33% 142.86%;
      background-position: 98% 0;
    }
  }
}

.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