あなたのキモチ つなげるカタチ

TOP > CSS > 【CSS】画像の上を複数の単色要素がスライドするカーテンアニメーション

【CSS】画像の上を複数の単色要素がスライドするカーテンアニメーション

スポンサーリンク

実装内容

画像の上を複数の単色要素がカーテンのようにスライドするアニメーションを紹介します。

実装所要時間:10分程度

実装方法


.block {
  position: relative;
  width: 768px;
  line-height: 0;
  margin: 50px auto 0;
}
.block .curtain {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #dadada;
  z-index: 1;
}

.block .curtain:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #e6a95d;
}

.block .curtain:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #dadada;
}

.block.active .curtain {
  width: 0;
  transition: width 1s ease-out .8s;
}

.block.active .curtain:before {
  width: 100%;
  transition: width .7s ease-out;
}

.block.active .curtain:after {
  width: 100%;
  transition: width .6s ease-out .4s;
}

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

スポンサーリンク