※当サイトではアフィリエイト広告を利用しています

HTML / CSS

【CSSアニメーション】@keyframesの使い方

 
【CSSアニメーション】@keyframesの使い方

今回はCSSアニメーションの1種、keyframesの使い方についてまとめたいと思います。

@keyframesは他のアニメーションプロパティであるtransiitonよりも
細かくアニメーションの指定を行うことができます。

こんなサンプルを作ってみました。

See the Pen by notebook (@orange-notebook) on CodePen.

 

発生するアニメーションの特徴はこんなかんじです。

発生するアニメーション
  • アニメーションが開始されるまで3秒かかる。
  • 正方形の大きさが大きくなる。
  • 正方形の色が「青」から「赤」に変わる。
  • 1回のアニメーションにかかる時間は2秒。
  • 3回アニメーションが繰り返される。
  • アニメーション終了後、正方形の大きさは大きいまま、色も「赤」の状態を維持する。

keyframesはたくさんのanimationプロパティがあるので、あわせて紹介したいと思います。

クリックできる目次

@keyframesの使い方

CSSの@keyframesを使うおおまかな手順は以下になります。

  1. @keyframesでアニメーションを定義する。
  2. アニメーションを使用するCSSセレクタにanimationプロパティで詳細設定を行う。

それではもうすこし詳しくみていきましょう〜。

手順1：@keyframesでアニメーションを定義する

まず@keyframesでアニメーションを定義していきます。
どのようにCSSプロパティを変化させるか指定するイメージです。

@keyframesの書き方はこんなかんじで、
fromとtoを使って表すものと、%で表すもの2種類の書き方があります。

書き方1：「from」と「 to」を使う方法

@keyframes アニメーション名(自分で決める) {
　　from { アニメーションの初期値 }
　　to {アニメーションの最終値 }
}

書き方2：「%」を使う方法

@keyframes アニメーション名(任意の名前) {
  0% { アニメーションの初期値 }
  50% { アニメーションの中間地点 }
  100% { アニメーションの 最終値 }
}

 

書き方2では50%を使っていますが、
パーセントの値は0~100%まで1%単位で指定してOKです。

@keyframesの書き方 & ポイント
  • @keyframesの後ろに自分で決めたアニメーション名を書く。
  • 波括弧を書いて、中にアニメーションの初期値、アニメーションの最終値、必要に応じて中間値を指定する。
  • 波括弧内は「from」と「to」を使った書き方、「%」を使った書き方2つがある。
  • 中間地点を指定するには「%」を使う。

今回の例でいうと、変化させるのは正方形の「大きさ」と「色」ですね。

そのため「width」「height」「background-color」
3つのプロパティの変化前と変化後の状態を指定していきます。

では実際のサンプルでの例を元に書き方をみていきましょう。

書き方1：「to」と「from」を使う

今回のサンプルでは「to」と「from」を使って以下のように書いています。

@keyframes boxChange {
  from {
    width: 150px;
    height: 150px;
    background-color: blue;
  }
  to {
    width: 200px;
    height: 200px;
    background-color: red;
  }
}

アニメーション名は「boxChange」にしました。

変化前は150pxの正方形、色は青なので、fromの中に
「width: 150px;」「height: 150px;」「background-color: blue;」と指定。

変化後は250pxの正方形、色は赤にするので、toの中に
「width: 200px;」「height: 200px;」「background-color: red;」と指定しています。

書き方2：「%」を使う

「%」を使った場合の書き方はこんなかんじです。
%なのでfrom、toよりも柔軟にタイミングを設定できます。

@keyframes boxChange {
  0% {
    width: 150px;
    height: 150px;
    background-color: blue;
  }
  100% {
    width: 200px;
    height: 200px;
    background-color: red;
  }
}

手順2：animationプロパティで詳細設定を行う

今度は@keyframesで定義したプロパティの変化をCSSセレクターに指定し、
animationプロパティで詳細を設定していきます。

animationプロパティは下記のように様々なプロパティがあります。

animation-name
アニメーションのキーフレームを示す @keyframes @ 規則の名前を指定します。

animation-duration
1 回のアニメーションサイクルに要する時間の長さを設定します。

animation-timing-function
アニメーションの進め方を設定します。 これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。

animation-delay
要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。

animation-iteration-count
アニメーションを繰り返す回数を設定します。 アニメーションを無限に繰り返すには infinite を指定してください。

animation-direction
アニメーションのシーケンス完了時に、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。

animation-fill-mode
アニメーションの実行前後に、指定したスタイルを適用するかを設定します。

animation-play-state
アニメーションを一時停止したり、再開したりすることができます。

出典：MDN CSS CSSアニメーションの使用

 

今回のサンプルで指定したanimationプロパティは下記になります。

.box {
  margin: 10px;
  width: 150px;
  height: 150px;
  background-color: blue;
  
  /* @keyframes設定内容 */
  /* アニメーション名(@keyframesで指定する名前) */
  animation-name: boxChange;
  /* 1回のアニメーションの所要時間 */
  animation-duration: 2s; 
  /* アニメーションの進み方 */
  animation-timing-function: ease-in; 
  /* アニメーション開始までの遅延時間 */
  animation-delay: 3s; 
  /* アニメーションを行う回数 */
  animation-iteration-count: 3; 
  /* アニメーション後の挙動 */
  animation-fill-mode: forwards; 
}

では指定したプロパティについてそれぞれ見ていきましょう。

animation-name

@keyframesで指定したアニメーションの名前を書きます。

animation-name: boxChange;

今回は「boxChange」というアニメーション名で
@keyframesを作ったので「boxChange」を指定します。

animation-duration

1回のアニメーションにかかる所要時間を指定します。

animation-duration: 2s;

今回は「2秒」で設定しているので「2s」としています。

animation-timing-function

アニメーションの進み方を指定します。
animation-timing-functionのプロパティは様々な指定方法がありますが、
メジャーな関数を一部MDNから引用しました。

ease
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。

linear
cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じで、等しい速度でアニメーションします。

ease-in
cubic-bezier(0.42, 0, 1.0, 1.0) と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。

ease-out
cubic-bezier(0, 0, 0.58, 1.0) と同じで、アニメーションは速く始まり、速度を落としながら続きます。

ease-in-out
cubic-bezier(0.42, 0, 0.58, 1.0) と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。

出典：MDN CSS animation-timing-function

 

animation-timing-function: ease-in;

今回は「ゆっくりはじまり終わりにかけて加速する」「ease-in」を指定しています。

animation-delay

アニメーションが開始される前の遅延時間を設定できます。

 animation-delay: 3s;

今回は要素が読み込まれてから「3秒後」に、
アニメーションを開始させているので「3s」としています。

animation-iteration-count

アニメーションを行う回数を指定できます。

 animation-iteration-count: 3;

今回は「3回」アニメーションを行わせるので「3」としています。
ずっとアニメーションを繰り返すには「infinite」を指定することで実現可能です。

animation-fill-mode

animation-fill-mode: forwards;

今回は変化後の状態を保持したので、「forwards」としています。
サンプルの例だと、正方形が大きくなったまま、色は「赤」の状態ですね。

もしアニメーション終了後、スタイルを初期値に戻したければ、値は「none」となります。
ですが、「animation-fill-mode」のデフォルトの値が「none」のため、
初期値に戻したい場合、「animation-fill-mode」自体指定する必要がありません。

おわりに

いかがでしたでしょうか。

@keyframesは細かくアニメーションを指定できるので、
使いこなせると複雑でおしゃれな動きも作ることができるようになりますね。

最後までお読みいただき、ありがとうございました。

【2パターン紹介】画像にオーバーレイをつける方法
【2パターン紹介】画像にCSSでオーバーレイをつける方法オーバーレイを画像に重ねることってありますよね。 画像の上にテキストを配置するときも、画像とテキストのコントラストを保つために必要だったりします。 今回は画像にオーバーレイをつける方法を2種類ご紹介したいと思います。...
関連する記事