映画の上映開始っぽいカウントダウンのCSSアニメーションサンプル

2020-09-232020-10-01CSS アニメーション サンプル集,CSS

CSSだけでカウントダウンアニメーションを作成する方法の紹介です。

簡単なカウントダウンのCSSアニメーションサンプル

簡単なカウントダウンのCSSアニメーションの動作サンプルとコードです。

フォントを変更すれば、見栄えも良くなるかもしれません。

※右下のRerunボタンで再生できます。

See the Pen CSS Count Down Animation （normal） by yochans (@yochans) on CodePen.

<div class="container">
	<div class="count">
		<p>10</p>
		<p>9</p>
		<p>8</p>
		<p>7</p>
		<p>6</p>
		<p>5</p>
		<p>4</p>
		<p>3</p>
		<p>2</p>
		<p>1</p>
	</div>
</div>

HTMLはカウントダウンの数字用のclass（count）を用意して10～1までの数値を作成しました。

カウントダウンの数字のCSSはposition: absoluteで同じ位置に重ねておいて、初期値では透過状態にしておいて、時間を2秒ずつずらして実行しているanimationで1.5秒だけフェードイン・アウトで表示するという方法をとっています。

.container{
	position:relative;
	width: 100%;
	height: 350px;
	background: #e0e0e0;
	overflow: hidden;
	animation: black-out 1s 10s linear;
}

/* count */
.count p{
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	margin: 0;
	padding: 0;
	color: #606060;
	font-size: 100px;
	font-weight: bold;
	opacity:0;
}


.count p:nth-child(1) {
	animation: count-down 1.5s 0s;
}

.count p:nth-child(2) {
	animation: count-down 1.5s 2s;
}

.count p:nth-child(3) {
	animation: count-down 1.5s 4s;
}

.count p:nth-child(4) {
	animation: count-down 1.5s 6s;
}

.count p:nth-child(5) {
	animation: count-down 1.5s 8s;
}

.count p:nth-child(6) {
	animation: count-down 1.5s 10s;
}

.count p:nth-child(7) {
	animation: count-down 1.5s 12s;
}

.count p:nth-child(8) {
	animation: count-down 1.5s 14s;
}

.count p:nth-child(9) {
	animation: count-down 1.5s 16s;
}

.count p:nth-child(10) {
	animation: count-down 1.5s 18s;
}

@keyframes count-down {
	0%,100% {opacity:0;}
	50% {opacity:1;}
}

映画のカウントダウン風にアレンジ

映画が始まる時のカウントダウン風にアレンジしてみました。

※右下のRerunボタンで再生できます。

See the Pen CSS Count Down Animation （movie） by yochans (@yochans) on CodePen.

カウントダウンの数字は、フェードインアウトだと違和感があったので、変更しました。

古ぽったさを演出するノイズと、左右か上下にフィルムも付けたらそれっぽくなりそうですね。

<div class="container">
	<div class="rotation"></div>
	<div class="circle"></div>
	<div class="line1"></div>
	<div class="line2"></div>
	<div class="count">
		<p>10</p>
		<p>9</p>
		<p>8</p>
		<p>7</p>
		<p>6</p>
		<p>5</p>
		<p>4</p>
		<p>3</p>
		<p>2</p>
		<p>1</p>
	</div>
	<div class="black_out"></div>
	<div class="text_pop"><p>CSSを楽しもう</p></div>
</div>

HTMLは、カウント（count）、数字周りの円（circle）、縦横の線（line）、くるくる回るやつ(rotation)、カウントダウン後のブラックアウト用（black_out）、ブラックアウトした後に浮かび上がるテキスト（text_pop）で構成しています。

.container{
	position:relative;
	width: 100%;
	height: 350px;
	background: #a0a0a0;
  overflow: hidden;
	animation: black-out 1s 10s linear;
}

/* count */
.count p{
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	margin: 0;
	padding: 0;
	color: #a0a0a0;
	font-size: 100px;
	font-weight: bold;
	opacity:0;
}


.count p:nth-child(1) {
	animation: count-down 1s 0s;
}

.count p:nth-child(2) {
	animation: count-down 1s 1s;
}

.count p:nth-child(3) {
	animation: count-down 1s 2s;
}

.count p:nth-child(4) {
	animation: count-down 1s 3s;
}

.count p:nth-child(5) {
	animation: count-down 1s 4s;
}

.count p:nth-child(6) {
	animation: count-down 1s 5s;
}

.count p:nth-child(7) {
	animation: count-down 1s 6s;
}

.count p:nth-child(8) {
	animation: count-down 1s 7s;
}

.count p:nth-child(9) {
	animation: count-down 1s 8s;
}

.count p:nth-child(10) {
	animation: count-down 1s 9s;
}


@keyframes count-down {
	0%,100% {opacity:1;}
}


/* circle */
.circle{
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 160px;
	height: 160px;
	border: double 15px #a0a0a0;
	border-radius: 50%;
}


/* line */
.line1{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #a0a0a0;
}

.line2{
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: #a0a0a0;
}



/* rotation */
.rotation {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	box-sizing: border-box;
	width: 1500px;
	height: 1500px;
	border-radius: 50%;
	background: #606060;
	background-image: linear-gradient(to right, #797979 50%, transparent 0);
}

.rotation::before{ 
	content: '';
	display: block;
	margin-left: 50%;
	height: 100%;
	border-radius: 0 100% 100% 0 / 50%;
	background-color: inherit;
	transform-origin: left;
	background: #797979;
	transform: rotate(0turn);
	animation: rotation1 .5s linear 20, rotation2 1s step-end 10;
}

@keyframes rotation1 {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(180deg); }
}


@keyframes rotation2 {
	0% { background: #797979; }
	50% { background: #606060; }
}


/* black out */
.black_out{
	position: absolute;
	width: 100%;
	height: 100%;
	animation: black-out .5s 10s linear forwards;
}

@keyframes black-out {
	100% { background: #000; }
}


/* text_pop */
.text_pop{
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	margin: 0;
	padding: 0;
	color: #fbfbfb;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	animation: text-pop 2s 13s linear forwards;
}

@keyframes text-pop {
	100% {opacity:1;}
}

出来る限りレスポンシブに作成していますが、カウントダウンの数値と、数値を囲っているcircleの円は高さをpxで調節しています。

カウントダウンの数字は、パッ、パッと切り替わるように、アニメーション時間と開始時間の差をなくしました。（1秒後に1秒、2秒後に2秒、3秒後に1秒のアニメーション・・）
また、

横線と縦線はborderではなく要素の背景色です。
横線なら横幅100％と縦幅1px、縦線な横幅1pxと高さ100％。

くるくる回るアニメーションは、CSSで作成する円グラフを参考に半円を重ねて回転させています。

ブラックアウト部分とテキスト表示は、アニメーション開始時間をカウントダウンの後にずらす（2つめの秒）ことで、なんとなく先に繋がるイメージで作ってみました。

ブラックアウトはanimationに「forwards」を指定することでアニメーション終了後にそのまま固定しています。