throbberをPNG画像とCSS3 Animationで作る

不勉強なことにCSS3 Animationはなめらかにスーッと滑らかに動くアニメーションしか出来ないと思っていたのですが、timing-functionにstepsというものがあってこれを使うとパラパラ漫画のようなアニメーションが出来ると知ったので、それを使ってthrobberを作ったメモです。

throbberの画像を用意する

PNGでドットが8つ円形に並んでいる画像を1つ用意しました。

HTMLを書く

<img class="throbber" src="throbber.png" width="適当なwidth" height="適当なheight">

CSSを書く

.throbber {
	/* steps(1, start) は step-start でも良いみたい */
	animation: rotate-throbber 1.1s steps(1, start) 0s infinite;
	-webkit-animation: rotate-throbber 1.1s steps(1, start) 0s infinite;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

@keyframes rotate-throbber {
	12.5% { transform: rotate( 45deg); }
	25%   { transform: rotate( 90deg); }
	37.5% { transform: rotate(135deg); }
	50%   { transform: rotate(180deg); }
	62.5% { transform: rotate(225deg); }
	75%   { transform: rotate(270deg); }
	87.5% { transform: rotate(315deg); }
	100%  { transform: rotate(360deg); }
}

@-webkit-keyframes rotate-throbber {
	12.5% { transform: rotate( 45deg); }
	25%   { transform: rotate( 90deg); }
	37.5% { transform: rotate(135deg); }
	50%   { transform: rotate(180deg); }
	62.5% { transform: rotate(225deg); }
	75%   { transform: rotate(270deg); }
	87.5% { transform: rotate(315deg); }
	100%  { transform: rotate(360deg); }
}

でいい感じにくるくる回ってくれました。