【CSS】脱jQueryでtransitionを使用してテキストを1行ずつ順番に表示させるアニメーションの実装方法のデモページ

※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)

このページの内容が難しいと感じた方はこちら

Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text

スポンサーリンク

Web制作会社LIGが運営するWebデザインスクール

CSS

.block {
  width: 300px;
  margin: 50px auto 0;
  line-height: 2.5;
}

.block span {
  position: relative;
  display: block;
  border-bottom: 1px dashed #000;
}

.block span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.block span:nth-child(1):after {
  transition: height 0.6s ease 1.1s;
}

.block span:nth-child(2):after {
  transition: height 0.6s ease 1.45s;
}

.block span:nth-child(3):after {
  transition: height 0.6s ease 1.8s;
}

.block span:nth-child(4):after {
  transition: height 0.6s ease 2.15s;
}

.block span:nth-child(5):after {
  transition: height 0.6s ease 2.5s;
}

.block.active span:after {
  height: 0;
}

JavaScript

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