Help us understand the problem. What is going on with this article?

【CSS3】@keyframes と animation 関連のまとめ

はじめに

animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。
簡単にアニメーションの設定ができるので、覚えると楽しいです。

そもそもアニメーションって?

アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。
この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。

最初は @keyframes について見ていきましょう。
説明するときに英語の読み方も記載していますが、参考程度に見てください。

keyframes について

@keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。
@keyframes は、@規則のため、@から始まり、波括弧内に記述します。
このように記述します。

CSS(@keyframesの記述例)
@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
    }
    100% {
        CSSプロパティ:値;
    }
}

@keyframes の後に任意でアニメーションの名前を決められます。
例えば、横幅が拡大するアニメーションなら sizeScale 、フェードインするアニメーションなら fadeIn のように、アニメーションの名前を任意で決めてください。
0% はアニメーション開始時を表しており、100% はアニメーション終了時を表しています。
その波括弧の中にCSSプロパティを記述して、アニメーションを指定します。

@keyframes は簡単なので、実例を見ながら、どのように記述するのか見ていきましょう。

CSS
@keyframes sizeScale {
    0% {
        width:200px;
    }
    100% {
        width:300px;
    }
}

この場合は、アニメーション開始時に width:200px の横幅からはじまり、アニメーション終了時には width:300px になります。

アニメーション開始時の横幅は特に指定せずに、終了時だけ width:300px にしたい場合は下記のようになります。

CSS
@keyframes sizeScale {
    100% {
        width:300px;
    }
}

終了時の 100% だけ指定すれば、終了時だけを指定したアニメーションになります。
お気づきかと思いますが、0%100% の記述は必須ではありません。

次は、アニメーションの途中で width:400px にし、終了時には 300px になるように記述してみましょう。

CSS
@keyframes sizeScale {
    50% {
        width:400px;
    }
    100% {
        width:300px;
    }
}

この場合は、アニメーションの途中(半分)で width:400px になり、終了時には width:300px になります。
アニメーションの開始から終了までの経過を 0% から 100% で指定できます。

次は、透明度を変更してみましょう。
opacity プロパティを使うことで、透明度の指定ができます。
opacity プロパティの値に 0 を指定すると透明になり、1を指定すると不透明になります。
アニメーション開始時は透明で、終了時には不透明になるように記述してみましょう。

CSS
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

横幅の大きさを変えたときと同じような記述なので、簡単ですね。

さらに横幅も変更してみましょう。

CSS
@keyframes fadeIn {
    0% {
        opacity:0;
        width:200px;
    }
    100% {
        opacity:1;
        width:400px;
    }
}

アニメーション開始時は、横幅が 200px で透明なため、何も表示されませんが、アニメーション終了時には、横幅が 400px になり、表示されるようになります。

ご覧のように widthopacity などのCSSプロパティを記述することで、拡大・縮小、透明・不透明など様々なアニメーションを指定できます。

今まで、アニメーション開始時を 0% 、アニメーション終了時を 100% と記述していましたが、fromto と記述することもできます。
from0% を表し、to100% を表します。
下記の2つは同じ意味です。

CSS
@keyframes sizeScale1 {
    0% {
        width:200px;
    }
    100% {
        width:400px;
    }
}
@keyframes sizeScale2 {
    from {
        width:200px;
    }
    to {
        width:400px;
    }
}

ここまで見てきて、2つ疑問があると思います。

  • @keyframes で指定したアニメーションは、どこに適用されるの?
  • アニメーション開始から終了までの時間はどこで指定するの?

これらは、animation プロパティで指定します。
@keyframes では開始から終了までのアニメーションを指定しました。
animation プロパティでは、どのアニメーションを適用するのか、適用したアニメーションはいつ開始されるのか、開始されてから終了するまでの時間、アニメーションの繰り返し回数などを指定することができます。

このように、@keyframes ではアニメーションのみを指定し、animation プロパティで適用するアニメーションやアニメーションの時間などを指定します。
なぜ、別々なの?という疑問もあるかと思います。
例えば、不透明度を徐々に上げてフェードインするアニメーションを @keyframes で指定したとします。
先ほども記述しましたが、下記のように指定します。

CSS
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes ではフェードインするというアニメーションのみ指定しています。
例えば、h1 の要素は3秒でフェードインして h2 の要素は5秒でフェードインしたい場合でも、フェードインするアニメーションの記述は一つで済みます。
別々になっているため、h1 h2 ごとにアニメーション(@keyframes)を記述する必要はありません。
同じアニメーションなら、@keyframes を1つ記述しておけば、使い回しができます。

次は animation プロパティを見ていきましょう。

animation 関連のプロパティについて

animation 関連のプロパティを指定することで、アニメーションの開始時間、開始から終了までの時間などを指定できます。
animation 関連のプロパティは、全部で 8 つありますが、animation プロパティ(ショートハンドプロパティ)を使うことで、各設定をまとめて記述できます。

No プロパティ 読み方 説明
01 animation-name アニメーション・ネーム アニメーションの名前
02 animation-duration アニメーション・デュレーション アニメーションが始まって終わるまでの時間を指定します。
03 animation-timing-function アニメーション・タイミング・ファンクション アニメーションの進行の度合いを指定します。
04 animation-delay アニメーション・ディレイ アニメーションが始まる時間を指定します。
05 animation-iteration-count アニメーション・イテレーション・カウント アニメーションの繰り返し回数を指定します。
06 animation-direction アニメーション・ディレクション アニメーションの再生方向を指定します。
07 animation-fill-mode アニメーション・フィル・モード アニメーションの開始前、終了後のスタイルを指定します。
08 animation-play-state アニメーション・プレイ・ステート アニメーションの再生・停止を指定します。
09 animation アニメーション 上記、8つのプロパティを一括で指定できる、ショートハンドプロパティです。

各プロパティについて見ていきましょう。

No.01 animation-name プロパティ

animation-name(アニメーション・ネーム)には、アニメーションの名前を指定します。
もっとわかりやすく言えば、先ほど紹介した @keyframes で記述した名前です。
下記のように記述します。

CSS(animation-nameの記述例)
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.abc {
    animation-name: fadeIn;
}

animation-name プロパティだけでは、どのアニメーションを適用するか設定しただけなので、まだアニメーションはされません。
この次の animation-duration プロパティを指定することで、アニメーションします。

No.02 animation-duration プロパティ

animation-duration(アニメーション・デュレーション) は、アニメーションが始まって終わるまでの時間を指定します。
時間を指定する単位は 秒数(s) または ミリ秒数(ms) になります。

指定できる単位 英語 日本語 秒で換算
s second 1sは1秒
ms milli seond ミリ秒 1msは1000分の1秒

ちなみに、paddingmargin などの長さを表す length 値を指定する場合は、margin:0; のように単位を省略することができますが、秒数などの time 値は単位を省略できませんので、0 の場合でも 0s のように単位も記述してください。

初期値は 0s です。
値は非負の正数(0を含む正数)で指定できます。

下記のように animation-duration: 3s; と記述した場合は、アニメーションが始まって終わるまでの時間は3秒です。

CSS(animation-durationの記述例)
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.abc {
    animation-name: fadeIn;
    animation-duration: 3s;
}

No.03 animation-timing-function プロパティ

animation-timing-function(アニメーション・タイミング・ファンクション)は、変化の度合いを指定できるプロパティです。
変化の度合いとは、アニメーション開始時から終了時まで一定に変化するのか、開始時は緩やかに変化して終了時に近づくと早く変化するのかなどの度合いです。
指定できる値は、ease, ease-in, ease-out, ease-in-out, linear など全部で9つあります。
初期値は ease です。
任意で変化の度合いを指定するときは、cubic-bezier で指定します。

No 読み方 説明
01 ease イーズ 初期値です。開始時と終了時は緩やかに変化します。
02 ease-in イーズ・イン 開始時は緩やかに変化、終了に近づくと早く変化します。
03 ease-out イーズ・アウト 開始時は早く変化し、終了時は緩やかに変化します。
04 ease-in-out イーズ・イン・アウト 開始時と終了時は、かなり緩やかに変化します。
05 linear リニア 開始から終了まで一定に変化します。
06 step-start ステップ・スタート 開始時に最終の状態になります。
07 step-end ステップ・エンド 終了時に最終の状態になります。
08 steps(正数, start または end) ステップス 指定した正数の段階で変化します。第2引数には start または end を指定できます。start を指定すると、アニメーション開始時から変化します。end を指定すると、アニメーション終了時に変化します。
09 cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) キュービック・ベジェ 変化の度合いを任意で指定します。

説明と一緒に実際のアニメーションも見るとわかりやすいです。
5秒かけて右に400px移動するアニメーションにそれぞれの値を指定しました。

animation-timing-function.gif

下記のように animation-timing-function: linear; と指定した場合は、開始から終了まで一定に変化します。

CSS(animation-timing-functionの記述例)
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.abc {
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-timing-function: linear;
}

cubic-bezier で変化の度合いを任意で指定することが可能ですが、3次ベジェ曲線で指定します。
ここでは詳しい説明はしませんので、cubic-bezier で指定したい方は調べてください。

No.04 animation-delay プロパティ

animation-delay(アニメーション・ディレイ)は、アニメーションが始まる時間を指定できるプロパティです。
アニメーションの開始から終了までの時間を指定する animation-duration プロパティと同じく時間を指定します。
時間を指定する単位は 秒数(s) または ミリ秒数(ms) になります。
初期値は 0s です。
値は非負の正数(0を含む正数)で指定できます。

下記のように animation-delay: 2s; と指定した場合は、2秒後にアニメーションが開始されます。

CSS(animation-delayの記述例)
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.abc {
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 2s;
}

No.05 animation-iteration-count プロパティ

animation-iteration-count(アニメーション・イテレーション・カウント)は、アニメーションの繰り返し回数を指定できるプロパティです。
初期値は 1 です。
値は非負の正数(0を含む正数)で指定できます。
アニメーションを無限に繰り返したい場合は、値に infinite を指定します。

CSS(animation-iteration-countの記述例)
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.abc {
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: 3;
}

下記のように animation-iteration-count: 3; と指定した場合は、アニメーションが3回繰り返されます。

No.06 animation-direction プロパティ

animation-direction(アニメーション・ディレクション)は、アニメーションの再生方向を指定できるプロパティです。
初期値は normal です。
値はnormal, reverse, alternate, alternate-reverse があります。

読み方 説明
normal ノーマル 毎回、指定した通り(順方向)のアニメーションが再生されます。
reverse リバース 毎回、逆方向からのアニメーションが再生されます。
alternate オルタネイト 順方向、逆方向のアニメーションを交互に繰り返します。
alternate-reverse オルタネイト・リバース 逆方向、順方向のアニメーションを交互に繰り返します。

説明と一緒に実際のアニメーションも見るとわかりやすいです。
3 秒かけて右に 370 px移動するアニメーションにそれぞれの値を指定しました。

animation-direction.gif

No.07 animation-fill-mode プロパティ

animation-fill-mode(アニメーション・フィル・モード)は、アニメーションの開始前、終了後のスタイルを指定できるプロパティです。
初期値は none です。
値は none, forwards, backwards, both があります。

読み方 説明
none ナン・ノン アニメーションで指定したスタイルは、アニメーションの開始前、終了後には適用されません。
forwards フォワード アニメーション終了時のスタイルがアニメーション終了後にも適用されます。
backwards バックワーズ アニメーション開始時のスタイルがアニメーション開始前にも適用されます。
both ボウス forwardbackwards の両方が適用されます。

どのように違うのか確認します。
50 px四方のボックスに背景黒を指定した fill-mode クラスを用意します。
背景色が赤からオレンジへ変わるchangeBgcolorアニメーションを定義して、fill-modeクラスに適用します。
3秒後にアニメーションが開始され、3秒かけて背景色が赤からオレンジへ変わります。

CSS(animation-fill-mode検証用)
.fill-mode {
    width: 50px;
    height: 50px;
    background: black;
    animation-name: changeBgcolor;
    animation-duration: 3s;
    animation-delay: 3s;
}
.none {
    animation-fill-mode:none;
}
.forwards {
    animation-fill-mode:forwards;
}
.backwards {
    animation-fill-mode:backwards;
}
.both {
    animation-fill-mode:both;
}

@keyframes changeBgcolor {
    0% {
        background: red;
    }
    100% {
        background: orange;
    }
}

アニメーション開始前と終了後で背景色がどのようになるのか注目してください。
実際の表示は下記です。

fill-mode.gif

アニメーション開始前は上から黒、黒、赤、赤ですが、終了後は、黒、オレンジ、黒、オレンジになっています。

先述した検証用コードは、一回のアニメーションで終了します。
実際にはアニメーションは繰り返されませんが、この記事を見ている方がどのようなアニメーションになるか確認できるようにGIFアニメーション上では繰り返して再生しています。
また、アニメーション開始時と終了時が区別できるように、GIFアニメーションの最後に2.5秒間の空白を入れております。

No.08 animation-play-state プロパティ

animation-play-state(アニメーション・プレイ・ステート)は、アニメーションの再生・停止を指定できるプロパティです。
初期値は running です。

読み方 説明
running ランニング アニメーションが実行されます。
paused ポーズ アニメーションが停止されます。

animation-play-state の値が pasused のときは、アニメーションが停止されますが、値が running に戻されると停止した時点からアニメーションが再開されます。
ボタンの選択に応じて、アニメーションを停止したいときなど、この値を変更することで可能です。

No.09 animation プロパティ

animationプロパティは、今までのプロパティを一括で指定できるショートハンドプロパティです。

  • animation-name の値
  • animation-duration の値
  • animation-timing-function の値
  • animation-delay の値
  • animation-iteration-count の値
  • animation-direction の値
  • animation-fill-mode の値
  • animation-play-state の値

各プロパティの値は半角スペースを空けて連続で記述します。

CSS(animationの記述例)
セレクタ名 {
    animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値;
}

言い換えれば下記のような感じです。

CSS(animationの記述例)
セレクタ名 {
    animation: 名前 開始から終了までの時間 進行の度合い 開始時間 繰り返し回数 再生方向 開始前・終了後のスタイル 再生・停止;
}

animation プロパティの値は、順不同で記述できます。
但し、animation-durationanimation-delay の2つのプロパティは両方とも秒数で指定するため、最初に記述した秒数が animation-duration で、次に記述した秒数が animation-delay と解釈されます。

アニメーションとして再生させるには、適用するアニメーションの名前と、アニメーションの開始から終了までの時間の2つを指定する必要があります。
animation プロパティで指定するなら下記のように animation: fadeIn 3s; と指定します。

CSS(animationの記述例)
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.abc {
    animation: fadeIn 3s;
}

animation プロパティの値一覧

animation プロパティを指定するときの参考にしてください。

No プロパティ 説明 初期値
01 animation-name アニメーションの名前 none 任意の文字列
02 animation-duration アニメーションが始まって終わるまでの時間を指定します。 0s 非負の正数(単位は s , ms で指定)
03 animation-timing-function アニメーションの進行の度合いを指定します。 ease ease, ease-in, ease-out, linear, cubic-bezier(), step-start, step-end, steps()
04 animation-delay アニメーションが始まる時間を指定します。 0s 非負の正数(単位は s , ms で指定)
05 animation-iteration-count アニメーションの繰り返し回数を指定します。 1 非負の正数(0.5 などの指定も可), infinite
06 animation-direction アニメーションの再生方向を指定します。 normal normal, reverse, alternate, alternate-reverse
07 animation-fill-mode アニメーションの開始前、終了後のスタイルを指定します。 none none, forwards, backwards, both
08 animation-play-state アニメーションの再生・停止を指定します。 running running, paused

複数のアニメーションを指定できるの?

フェードインしてフェードアウトするなど、複数のアニメーションを指定したいことが多々あります。
animation プロパティなら、, 区切りで複数のアニメーションを指定できます。

CSS(animationの複数記述例)
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

.abc {
    width: 50px;
    height: 50px;
    background: #ef0000;
    animation: fadeIn 3s, fadeOut 3s 5s forwards;
}

fadeIn 3s は 3 秒かけてフェードインするという指定です。
fadeOut 3s 5s forwards は 5 秒後に 3 秒かけてフェードアウトし、forwards なのでアニメーション終了後は最後の状態が適用されるという指定です。
そのため、abcクラスは、3 秒かけてフェードインして、5 秒後に 3 秒かけてフェードアウトします。

animation.gif

先述したコードはフェードインしてフェードアウトするという一回のアニメーションで終了します。
実際にはアニメーションは繰り返されませんが、この記事を見ている方がどのようなアニメーションになるか確認できるようにGIFアニメーション上では繰り返して再生しています。

今回、一例としてフェードインとフェードアウトを別々の @keyframes に記述して適用しましたが、@keyframes は細かくアニメーションを指定できるので、例えば 0% から 10% でフェードインして 90% から100% でフェードアウトするなど、一つの @keyframes で記述することもできます。

keyframes、animation、transform、transition のそれぞれの違いは?

CSSアニメーションに関連するプロパティ・文法は、@keyframesanimation プロパティの他に transform プロパティと transition プロパティがあります。
ざっくりと、それぞれの違いを確認しましょう。

プロパティ・文法 説明
@keyframes(キーフレームス) アニメーション流れ(開始から終了まで)を細かく指定できる。基本的にはanimationとセットで利用する。 アニメーション開始時は透明で終了時には不透明にするなど。
animation(アニメーション) アニメーションが開始するタイミングや、開始時から終了時までの時間などを指定できる。基本的には@keyframesとセットで利用する。 3秒後にアニメーションを開始して、5秒後にアニメーションを終了するなど。
transform(トランスフォーム) 移動や回転、伸縮、傾斜などの変形を指定できる。 右方向へ30px移動、X軸方向に回転するなど。
transition(トランジション) 特定のCSSプロパティに対して、どのタイミングで、どのくらいの時間をかけて変化するか指定できる。基本的には hover などの疑似クラスに対しての変化を指定する。 マウスオーバーしたときに3秒かけて変化するなど。

transform プロパティは移動や回転、伸縮などの指定ができるプロパティです。
@keyframes ではCSSプロパティを記述して、アニメーションを指定します。
@keyframestransform を組み合わせるとアニメーションの幅が広がるので、transform プロパティについても理解しておくとよいかと思います。
それぞれ別の記事にまとめておりますので、詳しくは下記をご覧ください。

@keyframesanimation の組み合わせでアニメーションの指定ができるため、transition プロパティの使いみちがなさそうに見えますが、マウスオーバーでボタンを変化させるときによく使われます。
なぜ、transition プロパティの方を使うかは下記が参考になります。

最後に

animation プロパティと @keyframes の基本的なところを説明しました。
animation-timing-functioncubic-bezier で任意の値を指定できますが、ベジェ曲線で指定するため直感的にわかりにくいです。
ブラウザの機能を利用すると直感的に指定することができます。
また、@keyframes を記述するときに、animation-timing-function を複数回記述することもできます。
それらについて詳しく知りたい方は、下記の記事が参考になります。

CSSのAnimationsに関する仕様は、W3Cの「CSS Transforms Module Level 1」に記載があります。
最新の情報は、上記のW3Cの仕様書(英語版)を確認してください。
仕様書を日本語に翻訳してくださっている方がいるので、英語が苦手な方は「CSS Animations Level 1 日本語訳」をご覧ください。

note

note でも記事を公開してるので、興味がある方はご覧ください。

【初学者向けコードリーディング】 PHP の TODO アプリのコードを一緒に読み解こう

7968
学んだことを投稿していきます。誤りがあればご指摘ください。 note でも記事を投稿しています。
https://note.com/7968
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした