patapata

HTML

<div class="patapata">
  <div class="patapata-wrap">
      <div class="patapata1"></div>
      <div class="patapata2"></div>
      <div class="patapata3"></div>
      <div class="patapata4"></div>
      <img src="http://lab.risewill.co.jp/images/web-design/action-sample-img-4partition.jpg" alt="アニメーション画像">
  </div>
</div>

SCSS

.patapata{
  padding: 20px;
  height: 400px;
  width: 100%;
  box-sizing: border-box;
  .patapata-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    .patapata1,
    .patapata2,
    .patapata3,
    .patapata4 {
      animation: patapata 2s cubic-bezier(.1, 0, .4, 4) forwards;
      background: #1b3264;
      height: 100%;
      pointer-events: none;
      position: absolute;
      top: 0;
      right: 0;
    }
    .patapata1 {
      animation-delay: 0.5s;
      z-index: 1;
      width: 100%;
    }
    .patapata2 {
      animation-delay: 1.0s;
      z-index: 2;
      width: calc(100%/4*3);
    }
    .patapata3 {
      animation-delay: 1.5s;
      z-index: 3;
      width: calc(100%/4*2);
    }
    .patapata4 {
      animation-delay: 2.0s;
      z-index: 4;
      width: calc(100%/4);
    }
    img{
      width: 100%;
    }
  }
  @keyframes patapata {
    100% {
      transform: translateX(100%);
    }
  }
}