Posted at

throbberをPNG画像とCSS3 Animationで作る

More than 5 years have passed since last update.

不勉強なことに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); }
}

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