たまにはCSSについて考えてみる(簡易アニメーション編)

はじめに

CSSはWEBページを作成する際に必要不可欠なものです。多くの方はHTMLとセットでCSSも学習したと思います。
文字の色や大きさを変えるなどのシンプルな使い方はプログラミング初学者の方でもとっつきやすいですが、少し複雑な装飾(アニメーション等)を実装するとなるとかなり難しいように感じます(少なくとも私は)。
幸いにも最近では少し調べればコピペで使えるコードがネット中に溢れかえっているので、実装すること自体はさほど難しくありません。私も趣味でホームページを作っていた際にはよく利用させてもらいました。

しかし、コピペではコードの内容を理解できていないため応用が利きません。そもそもコピペして内容を確認せずに終わるなど一部の人達に怒られてしまいます。
そこで今回は実際にコピペで使えるコードを参考に、どのような動きをしているのかを考えていくことにします。

本文

今回参考にさせていただいたサイトはCSSのみで実装するボタンデザインやホバーエフェクト 20＋αです。
シンプルで使い勝手が良いサンプルコードが数多く記載されています。

今回はこのサイトの10番のサンプルがどのような動きをしているのか確認します。
ボタンにマウスを乗せると左上から背景がするっと降りてくるコードです。

<a class="ss" href="#">Button</a>

.button {
    display: inline-block;
    width: 200px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    outline: none;

    position: relative;
    z-index: 2;
    background-color: #fff;
    border: 2px solid #333;
    color: #333;
    line-height: 50px;
    overflow: hidden;
  }
  .button::before,
  .button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
  }
  .button,
  .button::before,
  .button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  .button::after {
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
  }
  .button:hover::after {
    top: 0;
    left: 0;
    background-color: #333;
  }
  .button:hover {
    color: #fff;
  }

コードはサイトからそのまま引用してきました。

beforeとafterについて

beforeとafterは疑似要素といい、HTML側にコードを書かずに条件付きで要素を作成することが出来ます。
簡単な例を挙げてみます。ssクラスに疑似要素beforeとafterを記述し、以下のようにcontentとbackground-colorを設定すると下の画像のように表示されます。

  .ss::before{
    content: '前';
    background-color: #00BCD4;
  }

  .ss::after{
    content: '後';
    background-color: #f3ffe5;
  }

ここで注目してほしいのはbeforeとafterの疑似要素はButtonの前後に配置されていることです。今回は位置指定をしていないため、デフォルトの位置である前後に表示されています。

positionについて

positionについて説明すると長くなってしまうので今回は割愛します。
分からない方は以下のサイトをご参照ください。
CSSのposition: absoluteとrelativeとは

元のcssコードから位置に関する情報のみを抜粋すると以下のようなコードになります。

.button {
    position: relative;
  }

  .button::after {
    position: absolute;
    display: block;
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
  }

親であるbuttunクラスがrelativeであるため、疑似要素afterはbuttonクラスの左上の位置を基準点(top: 0, left: 0)とします。
そのためtopとleftの設定がマイナスとなると、親要素の左上に配置されます。

transitionについて

transitionプロパティによりアニメーションを実装することができます。transitionプロパティは以下の4つの値を引数にして実行されます。

• transition-property(変化を適用するプロパティ。規定値はall)
• transition-duration(変化にかかる時間を設定する)
• transition-timing-function(変化の度合いを設定する。規定値はease)
• transition-delay(変化が始まるまでの時間を設定する)

以下の記事で詳細な説明がされているので気になる方は是非。
【CSS3】Transition（変化）関連のまとめ

  .button,
  .button::before,
  .button::after {
    transition: all .3s;
  }
  .button::after {
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
  }
  .button:hover::after {
    top: 0;
    left: 0;
    background-color: #333;
  }
  .button:hover {
    color: #fff;
  }

すなわちこのコードは、

• 初期状態はafter要素は左上に「width: 100%; height: 100%;」の状態で存在するが、画面には表示されていない。

• hover(マウスを上に乗せると)すると、afterの位置が「top: -100%; left: -100%;」の状態(buttonの左上の画面外)から、「top: 0; left: 0;」の状態(すなわちbuutonの左上の位置)になり、背景の色の設定もされる。これによりbuttonクラスの画面の背景はすべてが黒に覆われる。(ちなみにbuttonクラスの文字色も変化)

• transitionを設定しているため、変化が0.3秒かけて行われるので左上から背景が落ちてくるようなアニメーションが行われる。

これでアニメーションがどうやって動いているのかわかりましたね！

このコードがどうやって動いているかを理解すればちょっとした変更も可能になります。
左上以外からアニメーションが行われるものを作りたい場合は、初期位置を以下のように設定します。

• 「top: 100%; left: -100%;」にすると左下からアニメーション。
• 「top: -100%; left: 100%;」にすると右上からアニメーション。
• 「top: 0; left: -100%;」にすると左からアニメーション。

同じ動きのものを考えてみる

サンプルで挙げられていたコードは位置を変更することによってアニメーションが実行されてました。
それならば位置は固定にして大きさだけ変更しても上手くいくのではないかと考えました。

    .button::after {
    /* top: -100%;
    left: -100%;
    width: 100%;
    height: 100%; */
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: #333;
  }
  .button:hover::after {
    /* top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    background-color: #333;
  }

このコードでも上手くいきました！

メモ

cssで知らない項目があったので、今回のアニメーションとは直接関係ないですが備忘録として記載しておきます。

z-index
重なったときの優先度。
値が大きいほど上に表示される。

overflow: hidden
内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない

おわりに

実際にどうやって動いているのかを理解するのは気持ちがいいですね。
CSSに関してはコピペでそのまま持ってきてしまうことが多いので、時間があるときにどうやって動いているのかを確認しておきたいですね。

※CODEPENを使用したほうがわかりやすそうなので、そのうち修正したいですね……。