下方にコンテンツがあることを知らせるための”SCROLL”などの表示に縦線を入れることがあるが、その線にCSSで動きをつける。

animationプロパティと@keyframesで線を動かす

.line-animation{
	position: relative;
	padding-top: 2.5em;
	padding-bottom: 64px;
	font-size: 16px;
}
.line-animation span{
	display: inline-block;
	transform-origin: left top;
	transform: rotate(-90deg);
	line-height: 1em;
}
.line-animation::before{
	content: '';
	display: block;
	position: absolute;
	left: 8px;
	bottom: 0;
	width: 1px;
	height: 80px;
	background-color: #000;
	opacity: 1;
}

.line-animation::after {
	content: '';
	display: block;
	position: absolute;
	left: 8px;
	width: 1px;
	background-color: red;
	animation-name: lineAnima;/*アニメーションの名前*/
	animation-duration: 4s;/*アニメーションの時間の長さ：4秒*/
	animation-timing-function: ease;/*アニメーションの変化のしかた：開始・終了ともに緩やか*/
	animation-iteration-count: infinite;/*アニメーションの繰り返し回数：無限*/
}
@keyframes lineAnima {
	0% {
		bottom: 80px;
		height: 0;
	}
	40% {
		bottom: 0;
		height: 80px;
	}
	80% {
		bottom: 0;
		height: 0;
	}
	100% {
		bottom: 0;
		height: 0;
	}
}

表示サンプル

Scroll