CSS3のanimationプロパティと@keyframesを使用すると、CSSのみでアニメーションをすることができます。
複雑なものでなければ簡単にできるので、まずは触ってみましょう。
今回は正方形を長方形にするアニメーションを作成します。
記述例
CSS（記述例）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes 任意の名前 { 0% { CSSの記述 } 100% { CSSの記述 } } /*アニメーションさせる要素 -----------------------------------*/ .animeBox01{ animation-name:〇〇〇 /*@keyframes で設定した『任意の名前』を〇〇〇に記述;*/ animation-duration: 3s; /*アニメーションのスピード設定*/ その他CSSの記述 } |
HTML（記述例）
|
1 |
<div class="animeBox01"></div> |
基本の形はこうなります。
まず、@keyframesの記述の後に、アニメーションに対して任意の名前を付けます。
0%は最初に表示される形、100%には最後に表示される形を記述します。
次にアニメーションさせる要素に対して、記述します。
@keyframesの記述の後に付けた、任意の名前と同じものをanimation-nameに対して記述します。
あとはanimation-durationでアニメーションのスピード設定をします。
実際にやってみよう
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@keyframes anime01 { 0% { width: 100px; background: #26DBC1; } 100% { width: 500px; background: #EC4C8D; } } .animeBox01 { animation-duration: 3s; animation-name:anime01; width: 100px; height: 100px; background: #26DBC1; } |
最初は100px、徐々に大きくなり最後には500px幅になって背景色が変わります。
アニメーションさせる要素については、今回はアニメーションが終わった後に要素が見えなくなってしまうので、一部0%と同じプロパティの指定をしています。
HTML
|
1 |
<div class="animeBox01"></div> |
これで完成です。
DEMO
一見複雑そうですが、基本を押さえれば便利に使える@keyframes。
機会があったらもう少し詳しく描いてみようかと思います。
