CSSのanimationのkeyframesの使い方【サンプルあり】

CSS3からanimationが使えるようになり、サイト上に複雑な動きをつけられるようになりました。

使ってみたいけど、複雑でちょっと難しい!?

そんなあなたのために、 animationの基本中の基本であるkeyframesについて説明します。

keyframesの基本

1. animationとkeyframesの名前を一致させる
2. animationでは時間と必要に応じてその他指定する
3. keyframesでは%とその時点のCSSを指定する

最低限の記述例

.aaa{
    animation: bbb 5s;
}
@keyframes bbb{
    100%{
       
    }
}

まず「animation」に名前を指定します。上記の例では「bbb」と名付けました。それからアニメーションにかかる時間=animation-durationを指定します。上記の例では「5s（=5秒）」にしました。必要に応じて他の要素も指定します。

「animation」に指定した名前を「keyframes」にセットします。上記の例では「@keyframes bbb」となります。

keyframes では0%~100%以内の数値とそのときのCSSを指定します。

この%はアニメーションにかかる時間=animation-durationの中の割合です。
50%なら5秒×0.5=2.5秒の地点のことを指します。

サンプル1.一定の動きの場合

html

<div class="animationwrap"><div class="animation"></div></div>

CSS

.animation{
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    top: 10px;
    animation: ugoki 5s linear infinite;
}
@keyframes ugoki{
    0%{
       left: 0;
    }
    100%{
        left: 100%;
    }
}

こちらは左から右へ一定のスピードで移動させています。

ただしこれならtransitonで指定すれば済む話です。

animationの利点は途中で変化をつけられるところです。

サンプル2.動きが途中で変化する場合

html

<div class="animationwrap"><div class="animation2"></div></div>

CSS

.animation2{
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    top: 10px;
    left: 0;
    animation: ugoki2 5s ease-in infinite;
}

@keyframes ugoki2{
    0%{
       left: 0;
    }
    40%{
       left: 80%;
    }
    80%{
       left: 80%;
    }
    100%{
        left: 100%;
    }
}

上記は童話「ウサギと亀」のウサギをイメージしてみました。
最初は一気にゴール近くに行き、途中で休み、最後に慌ててゴールする。そんなイメージです。

40%地点でleft: 80%を指定しています。
40%というのはanimationで指定した「5s」のうちの40%、つまり5秒×0.4＝2秒の地点での出来事です。

同様に80%は4秒の地点のことです。ここまで動かないようにしたいので前の地点と同じ left: 80%を指定しています。

そして最後にはゴールということで、100%のときにleft: 100%を指定しています。

このように地点によって変化をかけられるのがanimationとkeyframesの特徴です。

ちなみに数値を変化させるときautoへの変更はできないので注意しましょう。

サンプル3.色の変化

html

<div class="animationwrap"><div class="animation2"></div></div>

CSS

.animation3{
    width: 20px;
    height: 20px;
    background: #cf4242;
    position: absolute;
    top: 10px;
    animation: iro 5s ease-in infinite;
}

@keyframes iro{
    0%{
       background: #cf4242;
    }
    50%{
       background: #a0e384;
    }
    80%{
       background: #d442f5;
    }
    100%{
        background: #cf4242;
    }
}

サンプル2では数値の変化でしたが、animationは数値以外でも使えます。

上記のように色を指定するとグラデーションのように変化させることができます。

まとめ

1. animationとkeyframesの名前を一致させる
2. animationでは時間と必要に応じてその他指定する
3. keyframesでは%とその時点のCSSを指定する

これでCSSを使っていろいろな動きを表現できますね。

以上、CSSのanimationのkeyframesの使い方でした。