【CSS】アニメーションの作り方をマスターしよう！

2022年5月21日2023年7月17日

本記事ではCSSのanimationプロパティを使ってアニメーションを作成する方法について解説しています。

animationプロパティは、transitionプロパティと異なり詳細な設定をすることができたりアニメーションの回数を指定または無限に設定することも可能です。

animationプロパティの使い方をマスターすることで、ユーザーに自身のWebサイトを強く印象付けることができるので頑張って習得しましょう！

HTML/CSSの学習におすすめ書籍

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

総合評価

( 5 )

メリット

HTMLとCSSの基本が体系的に学べる
Webデザインの基本が学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

楽天ブックス

¥2,486 （2024/04/21 17:15時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

アニメーションはWebサイトに必要？

アニメーションはWebサイトに絶対に必要か？と問われると必要ではありません。では、何故アニメーションをしているサイトが多いのでしょうか？その答えはユーザーに興味を持ってもらうためです。

ユーザーに興味を持ってもらうとはいえアニメーションは動きがあり実装するとなると難しそうと感じる人も多いと思います。昔はアニメーションを作成するにはJavaScriptやjQueryなどで実装する必要がありましたが、今はCSSだけでアニメーションを実装することができるので、初心者の方でも複雑なアニメーションを簡単に実装することができます。

またJavaScriptやjQueryを利用しないことから、サイトが重いなどの現象は起きません。(パフォーマンスに影響が出ないのはとても良いです！)

アニメーションの作り方

@keyframesでアニメーションを定義する

まず始めにアニメーションを作成するには@keyframesでアニメーションを定義し中に実装したい処理を記述します。

@keyframes アニメーションの名前 {

}

@keyframesの中には開始地点から終了地点までを以下の2つで指定します。

0%〜100%の数値
to〜fromの文字

0%〜100%の数値で指定する方法

0%〜100%の数値で指定したい場合、@keyframesの中に以下のように記述します。

@keyframes アニメーションの名前 {
  0% {
    /* アニメーション開始時の処理 */
  }
  100% {
    /* アニメーション終了時の処理 */
  }
}

to〜fromの文字で指定する方法

to〜fromで指定したい場合、@keyframesの中に以下のように記述します。

@keyframes アニメーションの名前 {
  to {
    /* アニメーション開始時の処理 */
  }
  from {
    /* アニメーション終了時の処理 */
  }
}

animationに細かな設定をする

animation-name

@keyframesを定義したアニメーションを使用するにはanimation-nameプロパティで@keyframesを呼び出す必要があります。

@keyframes sample {}

animation-name: sample;

animation-duration

animation-durationプロパティは@keyframesに実装したアニメーションを何秒間かけて動かすか指定します。初期値は0sで、指定できる単位はs(秒)またはms(ミリ秒)のいずれかです。

animation-duration: 1s; /* 1秒間かけてアニメーションを実行 */
animation-duration: 500ms; /* 500ミリ秒(0.5秒)間かけてアニメーションを実行 */

animation-delay

animation-delayプロパティはアニメーションの開始時間を遅延させることができます。指定できる単位はs(秒)またはms(ミリ秒)のいずれかです。

animation-delay: 1.5s; /* 1.5秒後にアニメーションを実行 */
animation-delay: 300ms; /* 300ミリ秒(0.3秒)後にアニメーションを実行 */

animation-timing-function

animation-timing-functionプロパティはアニメーションがどのように変化させるか設定できます。

指定できる値は以下のとおりです。

値	説明
ease	【初期値】開始時と終了時をゆっくり変化
ease-in	開始時はゆっくりで終了時に早く変化
ease-out	開始時は早く終了時にゆっくり変化
ease-in-out	easeより開始時と終了時をゆっくり変化
linear	開始から終了まで一定の速度で変化
steps	コマ送りのように変化
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)	数値で細かく指定

下に配置されている「アニメーションボタン」をクリックとanimation-timing-functionプロパティに設定できる値がどのように変化していくのかが視覚的に分かります。

ease

ease-in

ease-out

ease-in-out

linear

cubic-bezier()でアニメーションの変化を指定したい場合は、Easing Functions Cheat Sheetがオススメです。おそらく実装したい変化もここに掲載されています。

animation-iteration-count

animation-iteration-countプロパティはアニメーションのループ回数を指定することができます。初期値は1で、アニメーションを無限ループさせる場合はinfiniteを指定します。

animation-iteration-count: 3; /* アニメーションを3回だけ実行 */
animation-iteration-count: infinite; /* アニメーションを無限に実行 */

animation-direction

animation-directionプロパティは@keyframesで定義したアニメーションを開始地点と終了地点どちらから実行するか指定することができます。

指定できる値は以下のとおりです。

値	説明
normal(初期値)	開始地点から終了地点にアニメーションを実行
reverse	終了地点から開始地点にアニメーションを実行
alternate	開始地点から終了地点にアニメーションを実行戻る時は終了地点から開始地点にアニメーションを実行
alternate-reverse	終了地点から開始地点にアニメーションを実行戻る時は開始地点から終了地点にアニメーションを実行

animation-fill-mode

animation-fill-modeプロパティはアニメーション終了時の状態を指定することができます。

指定できる値は以下のとおりです。

値	説明
none(初期値)	指定なし
forwards	終了地点の状態を維持
backwards	開始地点の状態に戻る
both	アニメーション実行時に”forwards”を適用アニメーション終了時に”backwards”を適用

animation-play-state

animation-play-stateプロパティはアニメーションの実行と一時停止をすることができます。

指定できる値は以下のとおりです。

値	説明
running	アニメーションの実行
paused	アニメーションの停止

【実践】ロード画面の作成

今回サンプルで作成するアニメーションはサイトのロード中などで見かけることのある3点ドットのマルが順に拡大・縮小しているものです。

▼今回作成するアニメーション

HTMLとCSSはアニメーションを追加する前のものを用意しているので、こちらをコピペして使ってください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div class="circle circle01"></div>
      <div class="circle circle02"></div>
      <div class="circle circle03"></div>
    </div>
  </body>
</html>

#container {
  text-align: center;
  margin-top: 100px;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
}

.circle01 {
  background: #f00;
}

.circle02 {
  background: #0f0;
}
.circle03 {
  background: #00f;
}

まず始めに拡大・縮小のアニメーションを定義し、アニメーションを無限ループさせる設定をします。拡大・縮小にはtransform:scale()を使用します。

.circle {
  animation-name: loading;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-direction: alternate;
}

すると、このように3つの円が拡大・縮小しているのが確認できます。しかし、3つとも同じタイミングでアニメーションがされているため動きに違いがありません。

ここでanimation-delayプロパティを使って各要素に異なる遅延時間を与えることで、バラバラのタイミングでアニメーションがされます。

.circle01 {
  animation-delay: -0.99s;
}

.circle02 {
  animation-delay: -0.66s;
}

.circle03 {
  animation-delay: -0.33s;
}

最初に見せた完成形と同じ動きのアニメーションを作成することができました。

まとめ

今回はanimationプロパティを使ってアニメーションを作成する方法について解説しました。

近年のフロントエンドではアニメーションを実装する機会が多いので、使えるようになると重宝されることは間違いありません。

animationプロパティ以外にもtransitionプロパティで簡易的なアニメーションを作成する方法についても別記事で解説しているので、興味のある方はご参考ください。