CSSのキーフレームアニメーションをつかってみよう。

いままでなにげなく使っていたCSSのキーフレームアニメーションですが、
ショートハンドの順番を毎回調べているような気がするのでメモを残しておきます。

animation: アニメーション名 時間 イージング 遅延時間 繰り返し回数 アニメーションの方向;

※ Firefoxではアニメーション名を "" や '' で囲うと動作しなくなるようです。

僕は、4つめまでは頭文字を取って「あじいち」と覚えることにしました。
個人的には回数はだいたいinfinite、方向はだいたいnormalをつかっているので、
名付けて、必殺「あじいち インフィニット ノーマル」アタックです。なんのこっちゃです。

ちなみに今回の記事にはこんなスタイルを当てています。

#sumpleAnimation {
    position: relative;
    top: -2px;
    -webkit-animation: sumple 1s ease-in 2s infinite alternate;
       -moz-animation: sumple 1s ease-in 2s infinite alternate;
        -ms-animation: sumple 1s ease-in 2s infinite alternate;
         -o-animation: sumple 1s ease-in 2s infinite alternate;
            animation: sumple 1s ease-in 2s infinite alternate;
}

@-webkit-keyframes sumple {
    0% {
        top: -2px;
    }
    100% {
        top: 5px;
    }
}

今回は以上です。お後がよろしいようで。