【CSS】画像の上に重ねたカラーを複数に分割した状態からスライドアニメーションで画像を表示する方法のデモページ

.block {
  position: relative;
  display: block;
  width: 700px;
  overflow: hidden;
  line-height: 0;
  margin: 50px auto 0;
}

.block img {
  width: 100%;
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 101%;
}

.active .curtain {
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.935,.015,.335,.92) 0s,background 0s linear 0.35s;
  transform: rotateY(0deg);
}

.curtain span {
  display: block;
  width: 20%;
  height: 20.1%;
  line-height: 0;
  background: #8c6853;
}

.active .curtain span {
  transition: transform .5s cubic-bezier(.935,.015,.335,.92);
  transform: rotateY(90deg);
}

.active .curtain span:first-child {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(2),
.active .curtain span:nth-child(3) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(4) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(5),
.active .curtain span:nth-child(6) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(7),
.active .curtain span:nth-child(8) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(9),
.active .curtain span:nth-child(10) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(11) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(12),
.active .curtain span:nth-child(13) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(14),
.active .curtain span:nth-child(15) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(16),
.active .curtain span:nth-child(17) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(18) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(19),
.active .curtain span:nth-child(20) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(21),
.active .curtain span:nth-child(22) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(23),
.active .curtain span:nth-child(24) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(25) {
  transition-delay: 0.6s;
  transform-origin: left;
}

@media screen and (max-width:640px){
  .block {
    width: 100%;
  }
}

$(window).on('load', function(){
  $(".block").addClass("active");
});