左から1文字ずつ表示レスポンシブWebデザイン

Demo

左 か ら 1 文 字 ず つ 表 示

HTML&CSS

HTMLindex.htmldownload

<p class="text_left1">

	<span>左</span>

	<span>か</span>

	<span>ら</span>

	<span>1</span>

	<span>文</span>

	<span>字</span>

	<span>ず</span>

	<span>つ</span>

	<span>表</span>

	<span>示</span>
</p>

CSSstyle.cssdownload

.text_left1 span{
	opacity: 0;
	animation: text_left1 0.5s ease 1 both;
}

/* アニメーションを時間差で開始する */
.text_left1 span:nth-of-type(1){
	animation-delay: 0.3s;
}
.text_left1 span:nth-of-type(2){
	animation-delay: 0.4s;
}
.text_left1 span:nth-of-type(3){
	animation-delay: 0.5s;
}
.text_left1 span:nth-of-type(4){
	animation-delay: 0.6s;
}
.text_left1 span:nth-of-type(5){
	animation-delay: 0.7s;
}
.text_left1 span:nth-of-type(6){
	animation-delay: 0.8s;
}
.text_left1 span:nth-of-type(7){
	animation-delay: 0.9s;
}
.text_left1 span:nth-of-type(8){
	animation-delay: 1.0s;
}
.text_left1 span:nth-of-type(9){
	animation-delay: 1.1s;
}
.text_left1 span:nth-of-type(10){
	animation-delay: 1.2s;
}

/* テキストのアニメーション */
@keyframes text_left1{

	0%{
		opacity: 0;
	}

	100%{
		opacity: 1;
	}
}
© 2025 wayday