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); }
}

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