人の目は動くものを自然と追ってしまうものです。
アニメーションはその意味で有効な手法と言えます。
今回は、Webページの基本的なフォーマットであるHTMLと装飾を施すために使用されるCSSでアニメーションを作るためのソースをまとめます。
かなり初歩的な内容です。
Contents
最終的な動き
以下のような正方形が幅を広げていき、幅が200pxになると動きが止まる、というアニメーションです。
→サンプル
※下のアニメーションGIFはアニメーションがループされていますが、今回作成するサンプルではアニメーション完了後にループしません。
HTMLソース
アニメーションに関する箇所のHTMLは以下のように記述しています。非常にシンプルです。
この「div.black_box」にCSSでスタイルを付与して、アニメーション効果も付与します。
- <div class="black_box"></div>
CSSの記述
以下がCSSの記述です。
- @keyframes box-animation{
- 0%{width: 0%; height: 200px;}
- 100%{width: 200px; height: 200px;}
- }
- .black_box{
- background: #000000;
- margin: 20% auto 0;
- animation-name: box-animation;
- animation-duration: 1s;
- animation-delay:0.5s;
- animation-fill-mode: both;
- }
各CSSの記述に関する説明は以下です。
@keyframes box-animation{〜}
先頭の「@keyframes」はアニメーションの動きを指摘する記述です。
その後に半角スペースを空けて、アニメーション名を記述します。
今回のサンプルで言えば「box-animation」です。
アニメーション名に続いて波括弧（{}）で挟んだ内側に、アニメーションの動きを指定していきます。
波括弧の内側の記述ですが、今回は2行だけです。
「0%{〜}」はアニメーションのスタート時点の状態を記述しています。
ここでもアニメーション名の記述の後と同じで、波括弧の間にスタイルを記述します。
今回は幅をアニメーションで変更していくので、スタート時は「width:0px;（幅を0px）」に指定しています。
（高さ変わらないのでアニメーションの終点と同じ「height:200px;（高さ200px）」とします。）
2行目の「100%{〜}」はアニメーションが完了する時のスタイルです。
「width:200px;（幅を200px）」に指定しています。
幅がゼロから200pxまで広くなる、単純なアニメーションです。
.black_box{〜}
以下の箇所は、アニメーションで変形する黒いボックスの初期設定です。
背景色と上下左右の余白の設定で、アニメーションには直接関係しません。
- background: #000000;
- margin: 20% auto 0;
以下がアニメーションに関する記述です。
- animation-name: box-animation;
- animation-duration: 1s;
- animation-delay:0.5s;
- animation-fill-mode: both;
- animation-name・・・
この要素に指定するアニメーション名を記述します。今回は先に記述した「box-animation」を指定します。 - animation-duration・・・
アニメーションが開始されて完了されるまでの時間を指定します。初期値は「0s（0秒）」。秒数で指定します。 - animation-delay・・・
アニメーションが開始されるまでの時間を指定します。初期値は「0s（0秒）」。秒数で指定します。 - animation-fill-mode・・・
アニメーション完了後のスタイルを指定します。以下のいずれかを指定します。- none・・・アニメーションの完了後にスタイルを指定しない。
- backwards・・・アニメーション開始前と「animation-delay」で指定された遅延時間の間に最初のアニメーション開始時のスタイルが適用されます。
今回の場合は「0%」の時のスタイルになります。 - forwards・・・「animation-iteretion-count」で指定した値が正数の場合、アニメーションが完了した時のスタイルが適用されます。指定がゼロの場合はアニメーション開始時のスタイルが適用されます。
- both・・・「backwards」と「forwards」を両方同時に指定します。
今回はこちらを指定します。
以上が記述した内容に関する説明です。
こちらのサンプルはCSSで指定するアニメーションのごく基本的な最低限の記述でした。
ここからスタイルを追加していくことで複雑なアニメーションを要素につけていくことができます。
