eyecatch

Webデザイン

【CSSアニメーション】@keyframes・animationプロパティの使い方解説

2022年4月21日

【CSSアニメーション】@keyframes・animationプロパティの使い方解説

今回は、「@keyframes」を使用したアニメーションについて解説していきます。

「@keyframes はどうやって使うんだっけ?」という人や、「transition プロパティは知っているけど、@keyframes を使用したアニメーションはあまり知らない」っていう人は、この記事を見るだけで使い方をマスターできるようになります。

本記事でわかることは以下の通りです。

  • @keyframes と animation プロパティの関係
  • @keyframes の書き方(使い方)
  • animation の書き方(使い方)

CSS アニメーションとは?

そもそも、CSS アニメーションとは何でしょうか?

「アニメーション」という単語の意味を検索すると「動画」と書かれています。
しかし、CSS アニメーションは動画というよりは、「HTML 要素に動きをつける / 変化をつける」という感じです。

この記事では、アニメーションという単語を使用していますが、「動き」、または「変化」という意味で読むと理解しやすいと思います。

transition との違い

@keyframes・animation プロパティと同様に、transition プロパティもアニメーションを付けられます。
transition プロパティについての詳しいことは、以下の記事を参考にしてください。

eye catch
参考【CSSアニメーション】transitionプロパティの使い方解説

HTML / CSS のコーディング練習で、あまり理解せずに transition プロパティを使用してしている方は多いのではないでしょうか? 「コード写経で、とりあえず transition 入れて ...

続きを見る

それぞれのプロパティのざっくりとした違いは、
「@keyframes・animation プロパティ」は複雑なアニメーションを指定できる、
「transition プロパティ」は簡単なアニメーションを指定できる、
です。

各プロパティの違いを以下にまとめておきます。

@keyframes・animation プロパティ

  • 複雑なアニメーション指定(アニメーションの変化度合を細かく設定できる)
  • アニメーション開始のきっかけが不要(自動再生できる)
  • アニメーションのループができる
  • アニメーション後にプロパティの値が継続できる

transition プロパティ

  • 簡単なアニメーション指定(アニメーションの開始と終了時のみ設定できる)
  • マウスホバー等のアニメーション開始のきっかけが必要(自動再生できない)
  • アニメーションのループができない
  • アニメーション後にプロパティの値が継続できない(プロパティの値が元に戻る)

@keyframes / animation の関係

書き方などは後で詳しく書きますが、まずは @keyframes と animation のざっとした説明です。

@keyframes

@keyframes - CSS: カスケーディングスタイルシート - MDN

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

「@keyframes」は、opacity や width などのスタイルをどのように変化させていくかを指定します。
例えば、最初は透明な状態(opacity: 0)から、だんだん不透明になって表示される(opacity: 1)という指定をします。

余談ですが、最初に「@」がつくのはアットルールと呼ばれるものです。
「keyframes」には、最初に「@」を付けます。

アットルール - CSS: カスケーディングスタイルシート - MDN

アットルールは CSS 文のうち、CSS の動作を既定するものです。アットルールはアットマーク、'@' (U+0040 COMMERCIAL AT) で始まり、それに続く識別子から、次のセミコロン、';' (U+003B SEMICOLON) もしくは次の CSS ブロックのどちらかが現れるまでの部分からなります。

animation

CSS アニメーション - CSS: カスケーディングスタイルシート | MDN

CSS アニメーション (CSS Animations) は CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。

「animation」は、「@keyframes」で指定した動きをいつ開始するか、アニメーション時間や繰り返し回数などを指定します。

ざっくりとした理解は、
「@keyframes」は、アニメーションの「振る舞い」を指定する
「animation」は、要素にアニメーションを「設定」する
というイメージで良いと思います。

簡単なサンプル

文章だけで説明されても分からないと思いますので、簡単なサンプルを載せておきます。

<div class="sample-box"></div>
@keyframes sample-animation {
  /* 最初 */
  0% {
    width: 0;
    opacity: 0;
  }

  /* 最後 */
  100% {
    width: 100%;
    opacity: 1;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation: sample-animation 5s infinite;
}

まずは、「@keyframes」部分で以下のアニメーションの動きを指定しています。
・「sample-animation」というアニメーション名を設定
・最初(0%)は、「width: 0;」「opacity: 0;」で、幅0の透明ボックス
・最後(100%)は、「width: 100%;」「opacity: 1;」で、幅100%の不透明ボックス

次に、animation プロパティで、先ほど「@keyframes」でつけたアニメーション名と共にアニメーションの設定をしています。
このように書くことで、青色のボックスが透明から不透明に切り替わりながら、右方向に伸びていくアニメーションになります。

各プロパティについての詳細は、後述しています。

@keyframes の使い方(書き方)

@keyframes は一般的に以下のような書き方をします。

@keyframes アニメーション名 {
  0% {
  }
  100% {
  }
}

「@keyframes」の後に「アニメーション名」を指定します。
その後に、% などで詳しいアニメーションの動き(振る舞い)を指定します。

動きの部分で指定できる値は以下のように、「%」「from」「to」が使用できます。

指定できる値

  • %
    動きを付けるタイミングの指定。「0%」「30%」「100%」など
  • from
    アニメーション開始時の指定。「0%」と同じ
  • to
    アニメーション終了時の指定。「100%」と同じ

これから、具体的に様々な書き方のパターンを見ていきます。

最初と最後を指定

アニメーションの最初と最後だけなら、「0%」と「100%」を指定します。

@keyframes sample-animation {
  /* 最初 */
  0% {
    width: 0;
    opacity: 0;
  }

  /* 最後 */
  100% {
    width: 100%;
    opacity: 1;
  }
}

また、「from」と「to」を使用して指定する方法もあります。

@keyframes sample-animation {
  /* 最初 */
  from {
    width: 0;
    opacity: 0;
  }

  /* 最後 */
  to {
    width: 100%;
    opacity: 1;
  }
}

上記のように、「0%」「100%」指定と「from」「to」指定は全く同じアニメーションになります。

0%と100%指定

fromとto指定

最後だけ指定

アニメーションの最後だけを指定することもできます。

@keyframes sample-animation {
  /* 最後 */
  100% {
    width: 100%;
    opacity: 1;
  }
}
@keyframes sample-animation {
  /* 最後 */
  to {
    width: 100%;
    opacity: 1;
  }
}

こちらも同様に、「100%」指定と「to」指定は同じアニメーションになります。

パーセントで細かく指定

アニメーションの動きをパーセントで細かく指定することもできます。

@keyframes sample-animation {
  0% {
    width: 0;
    opacity: 0;
  }
  25% {
    width: 50%;
  }
  50% {
    width: 25%;
  }
  75% {
    width: 75%;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

様々なプロパティのアニメーション

参考程度に、「width」「opacity」以外の他のプロパティでアニメーションさせてみます。

<div class="keyframes-sample-box"></div>
@keyframes keyframes-sample-animation {
  0% {
    background-color: blue;
  }

  25% {
    background-color: green;
  }

  50% {
    background-color: yellow;
    transform: translateX(100px) rotate(90deg) scale(1.5);
  }

  75% {
    background-color: red;
  }

  100% {
    background-color: blue;
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

.keyframes-sample-box {
  width: 50px;
  height: 50px;

  /* アニメーション設定 */
  animation: keyframes-sample-animation 5s infinite;
}

animation 関連のプロパティ

animation プロパティは以下8つのプロパティのショートハンド(一括指定)です。

animation 構成要素のプロパティ

プロパティ 説明 初期値
animation-name アニメーションの名前 none
animation-duration アニメーション時間(開始から終了までの時間) 0s
animation-timing-function アニメーション変化の度合 ease
animation-delay アニメーション開始までの遅延時間 0s
animation-iteration-count アニメーションの繰り返し回数 1
animation-direction アニメーションの再生方向 normal
animation-fill-mode アニメーションの開始前と終了後の状態 none
animation-play-state アニメーションの再生と停止 running

実際の記述方法は、以下のようになります。

/* animation プロパティ(一括指定) */
animation: name 3s ease 1s;

/* animation プロパティで指定したものと同じ意味(個別指定) */
animation-name: name;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 1s;

/* 複数アニメーションをカンマ区切りで、まとめて指定 */
animation: name1 3s ease 1s, name2 1s ease 1s;

animation を正しく設定するためには各プロパティの理解が必要のため、以降で各プロパティの説明をしていきます。

animation-name

animation-name は、アニメーションの名前を指定します。
アニメーション名は、他の物と被らないように注意しましょう。

実際には、以下のように使用します。

.sample-box {
  animation-name: sample-animation;
}

@keyframes sample-animation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

「@keyframes」の後に指定しているアニメーション名と同じ名前を、「animation-name」にも指定します。
「@keyframes」と「animation-name」はどちらを先に書いても正常に動作します。

animation-duration

animation-duration は、アニメーション開始から終了までの時間(秒またはミリ秒)を指定します。
例えば、「animation-duration: 3s;」とした場合は、アニメーションが完了するまでの時間を3秒として設定しています。

初期値は「0s」のため、animation-duration を指定しない場合は、アニメーションは即時に完了し、パッと切り替わったように見えます。
では、さっそくコードを見ていきます。

animation-duration: 1s; を指定

アニメーション開始から終了までの時間が1秒になります。

<div class="sample-box"></div>
@keyframes sample-animation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

animation-duration: 3s; を指定

アニメーション開始から終了までの時間が3秒になります。

<div class="sample-box"></div>
@keyframes sample-animation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

animation-timing-function

animation-timing-function は、animation-duration で指定した時間内の変化の仕方を指定します。
animation-timing-function で指定できる主な値は以下の通りです。

animation-timing-function プロパティ

説明
ease(初期値) 開始時と終了時を滑らかに変化
初期値なので省略可能
linear 速度が変わることなく一定に変化
ease-in 開始時はゆっくり、終了時は早く変化
ease-out 開始時は早く、終了時はゆっくり変化
ease-in-out ease よりも開始時と終了時、ゆっくり変化

上記以外の値もありますが、詳しくは以下を参照してください。

下記の動画は、animation-timing-function を指定したボックスが横移動しています。
横移動の仕方を見比べることで、変化の仕方の違いが分かります。

animation-delay

animation-delay は、アニメーションが開始するまでの遅延時間を指定します。
つまり、指定した時間が経過してから変化が始まるようになります。

animation-duration と同じように初期値は「0s」のため、指定していない場合は、アニメーションが即座に開始されます。

animation-delay: 2s; を指定

アニメーション開始までの遅延時間を2秒にしています。

<div class="sample-box"></div>
@keyframes sample-animation {
  100% {
    width: 100%;
  }
}

.sample-box {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-delay: 2s;
}

※青四角にマウスホバー or タップしてください(2秒後にアニメーション開始します)

animation-iteration-count

アニメーションの繰り返し回数を指定します。
指定できる値は以下の物があります。

指定できる値

  • 数値(初期値1)
    アニメーションを繰り返す回数
  • infinite
    アニメーションを無限に繰り返す

animation-iteration-count: 3; を指定

アニメーションを3回繰り返します。

<div class="sample-box"></div>
@keyframes sample-animation {
  100% {
    width: 100%;
  }
}

.sample-box {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: 3;
}

※青四角にマウスホバー or タップしてください(アニメーションを3回行います)

animation-iteration-count: infinite; を指定

アニメーションを無限に繰り返します。

<div class="sample-box"></div>
@keyframes sample-animation {
  100% {
    width: 100%;
  }
}

.sample-box {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

※青四角にマウスホバー or タップしてください(アニメーションが無限に繰り返されます)

animation-direction

アニメーションの再生方向を指定します。
指定できる値は以下の物があります。

指定できる値

  • normal(初期値)
    アニメーションを順方向に再生
  • reverse
    アニメーションを逆方向に再生
  • alternate
    順方向と逆方向を交互に再生。奇数回は順方向、偶数回は逆方向。
  • alternate-reverse
    順方向と逆方向を交互に再生。奇数回は逆方向、偶数回は順方向。
<div class="sample-box direction-normal-box">
  normal
</div>
<div class="sample-box direction-reverse-box">
  reverse
</div>
<div class="sample-box direction-alternate-box">
  alternate
</div>
<div class="sample-box direction-alternate-reverse-box">
  alternate-reverse
</div>
@keyframes sample-animation {
  0% {
    width: 50px;
  }

  100% {
    width: 100%;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;
  margin-bottom: 20px;
  color: skyblue;
  font-weight: bold;

  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.direction-normal-box {
  animation-direction: normal;
}

.direction-reverse-box {
  animation-direction: reverse;
}

.direction-alternate-box {
  animation-direction: alternate;
}

.direction-alternate-reverse-box {
  animation-direction: alternate-reverse;
}
normal
reverse
alternate
alternate-reverse

animation-fill-mode

アニメーションの開始前と終了後のスタイルを指定します。
指定できる値は以下の物があります。

指定できる値

  • none(初期値)
    アニメーション開始前と終了時にスタイルを適用しない
  • forwards
    アニメーション終了時に、終了時の状態のスタイルを適用(100%の状態のままになり、元の状態に戻らない)
  • backwards
    animation-delay 期間は、最初の @keyframes で指定された(0% or from)スタイルが適用される。アニメーション終了時に開始前のスタイルが適用される(元の状態に戻る)
  • both
    forwards と backwards の両方が適応される

animation-fill-mode: forwards; を指定

アニメーション終了時に、終了時の状態のままになります。

<div class="sample-box"></div>
@keyframes sample-animation {
  0% {
    background-color: aqua;
  }

  100% {
    width: 100%;
    background-color: aqua;
  }
}

.sample-box {
  height: 50px;
  width: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

※青四角にマウスホバー or タップしてください
(2秒後にアニメーション開始し、アニメーション終了後は100%の状態のままになる)

animation-fill-mode: backwards; を指定

アニメーション終了時に、開始前の状態に戻ります。

<div class="sample-box"></div>
@keyframes sample-animation {
  0% {
    background-color: aqua;
  }

  100% {
    width: 100%;
    background-color: aqua;
  }
}

.sample-box {
  height: 50px;
  width: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

※青四角にマウスホバー or タップしてください
(マウスホバー or タップ直後に0%の状態に変化。そして2秒後にアニメーション開始する。アニメーション終了後は元の状態に戻る)

animation-play-state

アニメーションの再生と停止をコントロールします。
指定できる値は以下の物があります。

指定できる値

  • running(初期値)
    アニメーション再生
  • paused
    アニメーション停止

animation-play-state: paused; を指定

アニメーションを停止させます。

<div class="sample-box"></div>
@keyframes sample-animation {
  100% {
    width: 100%;
  }
}

.sample-box {
  height: 50px;
  width: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.sample-box:hover {
  animation-play-state: paused;
}

※青四角にマウスホバー or タップしてください(アニメーションが止まります)

animation の使い方(書き方)

animation プロパティは、今まで説明してきた8つのプロパティのショートハンド(一括指定)です。

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

実際の記述方法は、以下のように各値を半角スペースで区切って指定します。

animation: name 3s linear 1s 3 reverse backwards paused;

各プロパティは省略可能、記述の順番は任意

animation の各プロパティは、省略することも可能です。省略した場合はそれぞれの初期値が適用されます。

また、animation プロパティの記述の順番は特に決まりはありませんが、animation-duration と animation-delay に関しては記述順序に注意が必要です。
秒数を2つ並べた場合、1番目の値が animation-duration となり、2番目の値が animation-delay となります。
例えば、「animation: name 1s 5s;」と指定した場合は、animation-duration が「1s」、animation-delay が「5s」となります。

animation プロパティに複数アニメーションも指定可能

アニメーションが複数ある場合、カンマ区切りで複数指定することもできます。

<div class="sample-box"></div>
@keyframes sample-animation1 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes sample-animation2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation: sample-animation1 3s infinite, sample-animation2 3s infinite;
}

幅をアニメーションさせる「sample-animation1」と、透明度をアニメーションさせる「sample-animation2」の両方を設定しています。

まとめ

最後にまとめておきます。

  • 「@keyframes」「animation」プロパティの概要
    「@keyframes」は、アニメーションの「振る舞い」を指定する
    「animation」は、要素にアニメーションを「設定」する
  • @keyframes の書き方
    @keyframes アニメーション名 {
     0% {
     }
     100% {
     }
    }
  • animation プロパティは下記8つのショートハンド(一括指定)
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-fill-mode
    • animation-play-state
  • animation プロパティの書き方
    animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

-Webデザイン
-,

© 2022 みやっちブログ