HTML/CSS

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

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

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

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

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

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

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

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

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

アニメーションの作り方

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

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

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

}

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

  1. 0%〜100%の数値
  2. 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プロパティはアニメーションがどのように変化させるか設定できます。

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

animation-timing-functionプロパティに設定できる値
ease【初期値】開始時と終了時をゆっくり変化
ease-in開始時はゆっくりで終了時に早く変化
ease-out開始時は早く終了時にゆっくり変化
ease-in-outeaseより開始時と終了時をゆっくり変化
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で定義したアニメーションを開始地点と終了地点どちらから実行するか指定することができます。

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

animation-directionプロパティに設定できる値
normal(初期値)開始地点から終了地点にアニメーションを実行
reverse終了地点から開始地点にアニメーションを実行
alternate開始地点から終了地点にアニメーションを実行
戻る時は終了地点から開始地点にアニメーションを実行
alternate-reverse終了地点から開始地点にアニメーションを実行
戻る時は開始地点から終了地点にアニメーションを実行

animation-fill-mode

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

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

animation-fill-modeプロパティに設定できる値
none(初期値)指定なし
forwards終了地点の状態を維持
backwards開始地点の状態に戻る
bothアニメーション実行時に”forwards”を適用
アニメーション終了時に”backwards”を適用

animation-play-state

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

【CSS】transitionプロパティの使い方本記事ではCSSのtransitionプロパティの使い方について解説しています。transitionプロパティは実務でも非常によく使うプロパティの一つです。使えるようになると様々なアニメーションを作成することができるようになるので、頑張って習得しましょう!...

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村