記事に戻る（Back to Article）

【CSS】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).on('load', function(){
  $(".block").addClass("active");
});