【CSS】タイトルをバウンドして表示するアニメーション

hoge

バウンドするのは、タイミング。
（位置じゃない）

びよんびよーんっていう風に表示される。

 

html

<h1>たいとる</h1>

 

css

h1{
	font-size:3rem;
	color:rgba(255,255,255,1);
	opacity:0;
	transform-origin: 50% 50%;
	transform:translate3d(0,0,0);
	animation: title_appear 3s normal ease-out 0 forwards;
}
@keyframes title_appear {
	0% { transform: scale(10, 10); opacity:0; color:rgba(255,255,255,1); }
	60% { transform: scale(0, 0); opacity:1; }
	70% { transform: scale(3, 3); opacity:1; }
	82% { transform: scale(0.8, 0.8); opacity:1; }
	93% { transform: scale(2, 2); opacity:1; }
	100% { transform: scale(1, 1); opacity:1; color:rgba(255,255,255,0.93);}
}