【初心者向け】CSSでアニメーションをつける方法

CSSでアニメーションを設定する方法をご存知ですか？

結論からいうと「keyframes」を使用することでアニメーションを作成＆設定できます。

これが何かよくわからずに放置していたりしませんか？

これが理解できるとWebデザインやCSSのコーディングがもっと捗ります。

keyframesの使い方を初心者の方にもわかりやすく解説するのでここで覚えてしまいましょう。

keyframesとは

keyframesとは簡単にいうとアニメーションをつけるCSSです。

詳しくは下記のような感じ。

CSS の @keyframes @-規則は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップを CSS トランジションよりも詳細に制御できます。

https://developer.mozilla.org/

世の中のWebサイトにあるボタンがキラリと光ったりするエフェクトは実はこれだったりします。

サンプルを見ながら学ぼう

まぁ実際のモノを見た方が早いですよね。

サンプルを見つつ、コードを見ていきましょう。

See the Pen keyframes[EASY] by yukiwebcreate (@Yukiwebcreate) on CodePen.

こちらが実際につくったkeyframesでアニメーション付きボタンです。

ちなみに、このコードはコピペで使っていただいて大丈夫です。

コードの解説

ここからコードの各所で一体何をどうやっているのかを解説していきます。

<div class="box">
  <button class="effect01 active01">CLICK</button>
</div>

まずHTMLの方はいたって単純。見てわかるとおり、ただのボタンで、

classに指定してあるのは

effect01が光るアニメーション、active01が押された時の見た目の変化を指定するものです。

/* 重要なところを抜粋 */
button{
    color:#fff;
    border:none;
}
button:hover {
  cursor: pointer;
}

.effect01{
    position: relative;
    padding: 10px 20px;
    background-color: #36ad46;
    animation: effect01 2s ease-in-out infinite;
　　/* effect01というアニメを2秒かけてゆるやかに無限回繰り返すという意味 */
}

@keyframes effect01 { /* effect01という名前のアニメーションを定義します */
    0% {opacity: 1;}　/* 0%=アニメのスタート時。その時点では不透明度1(100%)という意味 */
    50% {opacity: 0.1;} /* 50%=アニメの中間地点。その時点では不透明度が0.1(10%)という意味 */
    100% {opacity: 1;}　/* 1000%=アニメの終了時。その時点では不透明度1(100%)という意味 */
}

.active01:active{ /* activeはclickされている間の状態をさす */
    background: #22682b;
    animation: none; /* clickされたらアニメーションをなくす */
    transform: scale(0.9); /* そして大きさを90%にして押されている感を出す */
}

今回一番重要なのはここ、CSSです。

ポイントを３つほどに分割して説明します。

ポイント1: keyframesはanimationとセットで使う

１つめのポイントとしては

keyframesとanimationはセットで使うということ。

@keyframes effect01 { /* effect01という名前のアニメーションを定義します */ }

keyframesで定義されているアニメーションを

.effect01{
    /* 省略 */
　　/* effect01というアニメを2秒かけてゆるやかに無限回繰り返す */
　　animation: effect01 2s ease-in-out infinite;
}

effect01の中で呼び出して使用しています。

ポイント2: 0%~100%はアニメーションの変化するタイミングを示す

コード内にも解説を書いたように、各数値はアニメーションの

0% = スタート時

50% = 中間地点

100% = 終了時

を示しています。

つまり80%などと指定すればアニメーションが８割進んだタイミングでの変化を指示できますし、

細かく刻めば微細な変化をたくさん追加することも可能なわけです。

このあたりは慣れてきてからやってみましょう。

ポイント3: activeはクリックされている間の指定

.active01:active{ /* activeはclickされている間の状態をさす */ }

この:avitveはマウスなどでクリックされている間(まだ離してはいない)の見た目を指定しています。

これはkeyframesとは関係ないように見えますが、

hoverやactive時にanimationを止めるという挙動はよくある話ですので実は関連が深いです。

animation: none; /* clickされたらアニメーションをなくす */

animation: none; を指定することで、active時には点滅アニメーションをとめて

ちゃんとボタンが選択できていることをユーザにわかりやすく伝えるといいでしょう。

まとめ

keyframesはその構造をわかってしまえば扱うのは苦労しません。

アニメーションを使いこなして動きのあるモダンなサイトが制作できたら、Web制作やフロントエンドのエンジニアとしてスキルがグッとあがりますね。

ご自身でも関連のプロパティや値をいじってみて遊んでください！