記事に戻る（Back to Article）

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

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

jQuery使用版

English Page

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

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")
};