【CSS】脱jQueryで画像の上に重ねた斜めに傾けたカラーをスライドした後に画像を表示させるカーテンアニメーションの実装方法のデモページ

.block {
  position: relative;
  width: 768px;
  overflow: hidden;
  margin: 70px auto 0;
}

.block:after {
  content: '';
  display: block;
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: #55310e;
  transform: rotate(5deg);
  transition: all 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.active.block:after {
  transform: rotate(5deg) translateX(100%);
  transition: all 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.8s;
}

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

window.onload = function() {
  document.getElementById("block").classList.add("active")
};