幅をゼロから指定のサイズまでアニメーションさせる、かんたんなCSSアニメーション01

【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

人の目は動くものを自然と追ってしまうものです。
アニメーションはその意味で有効な手法と言えます。

今回は、Webページの基本的なフォーマットであるHTMLと装飾を施すために使用されるCSSでアニメーションを作るためのソースをまとめます。
かなり初歩的な内容です。

最終的な動き

以下のような正方形が幅を広げていき、幅が200pxになると動きが止まる、というアニメーションです。

→サンプル
※下のアニメーションGIFはアニメーションがループされていますが、今回作成するサンプルではアニメーション完了後にループしません。

キーフレムアニメーションサンプル

HTMLソース

アニメーションに関する箇所のHTMLは以下のように記述しています。非常にシンプルです。
この「div.black_box」にCSSでスタイルを付与して、アニメーション効果も付与します。

  1. <div class="black_box"></div>

CSSの記述

以下がCSSの記述です。

  1. @keyframes box-animation{
  2.   0%{width: 0%; height: 200px;}
  3.   100%{width: 200px; height: 200px;}
  4. }
  5. .black_box{
  6.   background: #000000;
  7.   margin: 20% auto 0;
  8.   animation-name: box-animation;
  9.   animation-duration: 1s;
  10.   animation-delay:0.5s;
  11.   animation-fill-mode: both;
  12. }

各CSSの記述に関する説明は以下です。

@keyframes box-animation{〜}

先頭の「@keyframes」はアニメーションの動きを指摘する記述です。
その後に半角スペースを空けて、アニメーション名を記述します。
今回のサンプルで言えば「box-animation」です。
アニメーション名に続いて波括弧({})で挟んだ内側に、アニメーションの動きを指定していきます。

波括弧の内側の記述ですが、今回は2行だけです。

「0%{〜}」はアニメーションのスタート時点の状態を記述しています。
ここでもアニメーション名の記述の後と同じで、波括弧の間にスタイルを記述します。
今回は幅をアニメーションで変更していくので、スタート時は「width:0px;(幅を0px)」に指定しています。
(高さ変わらないのでアニメーションの終点と同じ「height:200px;(高さ200px)」とします。)

2行目の「100%{〜}」はアニメーションが完了する時のスタイルです。
「width:200px;(幅を200px)」に指定しています。

幅がゼロから200pxまで広くなる、単純なアニメーションです。

.black_box{〜}

以下の箇所は、アニメーションで変形する黒いボックスの初期設定です。
背景色と上下左右の余白の設定で、アニメーションには直接関係しません。

  1.   background: #000000;
  2.   margin: 20% auto 0;

以下がアニメーションに関する記述です。

  1.   animation-name: box-animation;
  2.   animation-duration: 1s;
  3.   animation-delay:0.5s;
  4.   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で指定するアニメーションのごく基本的な最低限の記述でした。
ここからスタイルを追加していくことで複雑なアニメーションを要素につけていくことができます。

関連記事

  1. 【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

    【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

  2. 【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

    要素が画面に入ると要素をフェードインで表示するJavaScriptのサ…

  3. 【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

    キーフレームアニメーションの開始のきっかけ(トリガー)