スクロールを促すシンプルなループアニメーション

2015年11月18日CSSテクニック

ファーストビュー全体に広がる全画面ヘッダーなどを最初に表示する場合、下にまだコンテンツがある注意を促すことが出来る、シンプルなループアニメーションです。

HTML

<span id="mouse"></span>

CSS

#mouse,
#mouse:before {
	position: absolute;
	left: 50%;
}
#mouse {
	top: 50%;
	width: 40px;
	height: 65px;
	margin-left: -20px;
	margin-top: -33px;
	box-sizing: border-box;
	border: 1px solid #52d3ff;
	border-radius: 25px;
}
#mouse:before {
	content: '';
	top: 8px;
	width: 8px;
	height: 8px;
	background: #52d3ff;
	margin-left: -4px;
	border-radius: 4px;
	animation: scroll 1.5s infinite;
	-webkit-animation: scroll 1.5s infinite;
	-moz-animation: scroll 1.5s infinite;
}
@keyframes scroll {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		transform: translateY(41px);
	}
}
@-webkit-keyframes scroll {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		transform: translateY(41px);
	}
}
@-moz-keyframes scroll {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		transform: translateY(41px);
	}
}