【CSS】画像の上を台形の単色背景が移動するカーテンアニメーション

実装内容

画像の上を台形の単色背景が移動するカーテンアニメーションを紹介します。

実装所要時間：10分程度

>> DEMOはこちらから！

実装方法

.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%;
  }
}

【簡単な解説】
現在制作中

>> DEMOはこちらから！