keyframesの中でeasingを設定する

CSSのkeyframesでイージングを個別に設定できることを知らなかったので、方法をメモしておきます。

サンプルコード

ボールがバウンドするようなアニメーションを実装してみます。
まずは対応前のコードです。

HTML

<div class="ball"></div>

CSS

.ball {
	position: relative;
	top: 100px;
	left: 100px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: #000;

	animation: ball 2s linear infinite;
}
@keyframes ball {
	0% {
		transform: translateY(-50px);
	}
	20% {
		transform: translateY(0px);
	}
	38% {
		transform: translateY(-32px);
	}
	56% {
		transform: translateY(0px);
	}
	72% {
		transform: translateY(-12px);
	}
	88% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(0px);
	}
}

animation-timing-functionで一定の速度で動くlinearを指定して、keyframesの割合で調整しています。
対応前のデモページ

keyframes内でanimation-timing-functionが指定できるので、個別に設定してみます。

CSS

.ball {
	position: relative;
	top: 100px;
	left: 100px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: #000;

	animation: ball 2s linear infinite;
}
@keyframes ball {
	0% {
		transform: translateY(-50px);
		animation-timing-function: ease-in;
	}
	20% {
		transform: translateY(0px);
		animation-timing-function: ease-out;
	}
	38% {
		transform: translateY(-32px);
		animation-timing-function: ease-in;
	}
	56% {
		transform: translateY(0px);
		animation-timing-function: ease-out;
	}
	72% {
		transform: translateY(-12px);
		animation-timing-function: ease-in;
	}
	88% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(0px);
	}
}

これで個別にイージングが設定され、最初のサンプルよりボールのバウンドのような動きになりました。
対応後のデモページ