CSS3：ロードアイコンパターン9

表示サンプルはこちら。
http://jsdo.it/goto_jp/m5MY

HTMLはこちら。

<span class='icon9'></span>

Sassの記述は下記になります。

$icon-width:   20px;
$icon-height:   20px;
$color-1: #096;
$color-2: #069;
.icon9 {
    display:inline-block;
    vertical-align:middle;
    width:$icon-width;
    height:$icon-height;
    border-radius:$icon-width;
    background: $color-1;
    animation:
        flip-color 2s linear infinite,
        flip-xy 2s linear infinite;
    -webkit-animation:
        flip-color 2s linear infinite,
        flip-xy 2s linear infinite;

    &:after {
    }
}
@keyframes flip-xy {
    0% {transform: rotateX(0deg);}
    25% {transform: rotateX(90deg);}
    50% {transform: rotateY(0deg);}
    100% {transform: rotateY(180deg);}
}
@-webkit-keyframes flip-xy {
    0% {-webkit-transform: rotateX(0deg);}
    25% {-webkit-transform: rotateX(90deg);}
    50% {-webkit-transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(180deg);}
}
@keyframes flip-color {
    0% {background: $color-1;}
    24% {background: darken($color-1,10);}
    25% {background: $color-2;}
    74% {background: $color-2;}
    75% {background: $color-1;}
    100% {background: $color-1;}
}
@-webkit-keyframes flip-color {
    0% {background: $color-1;}
    24% {background: darken($color-1,10);}
    25% {background: $color-2;}
    74% {background: darken($color-2,10);}
    75% {background: $color-1;}
    100% {background: $color-1;}
}

一つのanimationプロパティで2種類のキーフレームを読んでいます。

「flip-xy」で上下・左右の立体回転をして「flip-color」で色を変えることで裏表があるように見せています。

「flip-xy」と「flip-color」を一つのkeyframesに収めることも可能ですが、動きを分けることで他のクラスに流用しやすくなります。