簡単！CSS3でアニメーションを実装する方法【vol.1】 – とりあえずはじめの一歩。

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のTipsは【簡単！CSS3でアニメーションを実装する方法【 vol.1 】 – とりあえずはじめの一歩。】です。CSS3アニメーションは、jQueryアニメーションよりも描写が美しくかつ記述も簡単ですので、全5回に分けてステップアップ式にメモしておきます。すこし長いですがお付き合い頂けましたら幸いです。

はじめに

CSS3アニメーションを使う際に気をつけたいのはブラウザ対応になります。現状では【Chrome,Firefox,Safari,Opera】でしか動作しないと考えてよいかと思います。IE環境でどうしても動かしたい場合はjQueryと組み合わせて実現する事も可能ですし、アニメーションしないだけであってアニメーション後の描写はされますので割り切って使っても良いのではないでしょうか。ここでは説明が長くなりますのでIE放置でいきます。

さっそくアニメーション

前置きが長くなりましたがさっそくアニメーションの例です。
最初は【 DIVを回転させる】アニメーションを目指します。

共通HTML

<div class="css3-A">CSS3</div>

CSS

div.css3-A{
    -webkit-animation: A 2s ease 0s;
    animation: A 2s ease 0s;
}
@-webkit-keyframes A {
    0%   {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);}
}
@keyframes A {
    0%   {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

これで一応完成です。この記述には「-webkit-あり」と「-webkit-なし」の２種類があります。地味に重要なパートですので次で説明します。
　

-webkit-の併記について

少し前までこの記述（ベンダープレフィックス）には、Firefox用の【-moz-】やOpera用の【-o-】がありました。現時点（2013.6.36）では一部を除きこの記述は不要になっています。ただ残念な事にtransformを使用する際はChrome,Safari用に【-webkit-】を記述する必要がありますのでご注意ください。それ意外を対象としたアニメーション（高さや色のアニメーション）だけなら不要です。
　

各設定値に関して

各設定値については下図をご参照ください。これで簡単なキーアニメーションは実装できると思います。

ループアニメーション

上の図に応じて【 DIVをループ回転させる】アニメーションを目指します。

CSS

div.css3-A{
    -webkit-animation: A 2s ease 0s infinite alternate;
    animation: A 2s ease 0s infinite alternate;
}
@-webkit-keyframes A {
    0%   {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);}
}
@keyframes A {
    0%   {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

イージングに関して – イージング一覧

CSS3アニメーションではjQueryのようなイージングの指定が行えます。種類こそ少ないものの自分で数値の指定もできますので実はすごく便利です。各イージングの表示確認の為にデモページも用意しましたので、もしよろしければ併せてご参照ください。
　

第二回はマウスホバーによってアニメーションを発火させる方法を書きたいと思います。
以上になります。