PR

CSSアニメーションの動き方を比較！animation-timing-functionの違いを一目で確認

【広告】

CSSアニメーションでよく使われる animation-timing-function は、動きの「速さの変化」を決めるプロパティです。
ease、ease-in、ease-out、ease-in-out、linear の5種類を同時に動かして比較することで、それぞれの特徴を一目で確認できるようにしました。
この記事では、サンプルコードとともに動きの違いをシンプルに解説します。

animation-timing-functionとは？

animation-timing-function は、CSSアニメーションの「動き方（速さの変化）」を指定するプロパティです。
アニメーション全体の長さは animation-duration で決まりますが、その中で「最初ゆっくり→途中で速く→最後またゆっくり」といった速度の変化の仕方を決めるのがこのプロパティです。

たとえば、linear は常に一定の速度で動き、ease-in は最初がゆっくり、ease-out は最後がゆっくり動きます。
この違いを実際の動きで見比べると、アニメーションの印象がどれだけ変わるかがよくわかります。

5種類の動きを同時に比較してみよう

ここでは、5つの円を使って animation-timing-function の違いを同時に確認できます。
スタートボタンを押すと円が同時に動き出し、それぞれ異なる動き方をします。

  • A：ease（自然な加速・減速）
  • B：ease-in（最初ゆっくり、最後速く）
  • C：ease-out（最初速く、最後ゆっくり）
  • D：ease-in-out（両端ゆっくり、中間速い）
  • E：linear（一定速度）

リセットボタンで元の位置に戻せるので、何度でも違いを比較できます。
コードは下に掲載していますので、動きと対応するプロパティを確認しながら学べます。

HTML構造の確認

<body>
  <div class="container">
    <div class="circles">
      <div class="circle circle1">A</div>
      <div class="circle circle2">B</div>
      <div class="circle circle3">C</div>
      <div class="circle circle4">D</div>
      <div class="circle circle5">E</div>
    </div>
    <div class="btns">
      <button id="startBtn">スタート</button>
      <button id="resetBtn" disabled>リセット</button>
    </div>
  </div>
  <script src="./app.js"></script>
</body>

HTMLは5つの円とスタート・リセットボタンのみで構成されています。
それぞれの円には A～E のラベルが付いており、CSSで異なる animation-timing-function を指定しています。

CSSの解説

.container {
  width: 90%;
  margin: 20px auto 0;
  padding: 30px 0;
}

.circles {
  width: 300px;
  margin: 0 auto;
  border-left: 5px solid #999;
  border-right: 5px solid #999;
}

.circle {
  width: 50px;
  height: 50px;
  margin: 10px 0;
  border-radius: 50%;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(0);
}

.circle.anime {
  animation-name: slide-right;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}

.circle1 {
  background-color: skyblue;
  animation-timing-function: ease;
}

.circle2 {
  background-color: lightpink;
  animation-timing-function: ease-in;
}

.circle3 {
  background-color: lightgreen;
  animation-timing-function: ease-out;
}

.circle4 {
  background-color: violet;
  animation-timing-function: ease-in-out;
}

.circle5 {
  background-color: yellow;
  animation-timing-function: linear;
}

@keyframes slide-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(250px);
  }
}

.btns {
  margin-top: 30px;
  text-align: center;
}

.btns button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #cc5252;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btns button:hover {
  background-color: #b34747;
}

.btns button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.container

.container {
  width: 90%;
  margin: 20px auto 0;
  padding: 30px 0;
}
  • ページ全体のラッパー
  • 幅は画面の90％
  • 上マージン20px、上下のパディング30px
  • margin: 0 auto; により水平方向は中央揃え

.circles

.circles {
  width: 300px;
  margin: 0 auto;
  border-left: 5px solid #999;
  border-right: 5px solid #999;
}
  • 5つの円をまとめるボックス
  • 幅は300px、中央揃え
  • 左右に5pxの線を表示して視覚的な区切りを作る

.circle

.circle {
  width: 50px;
  height: 50px;
  margin: 10px 0;
  border-radius: 50%;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(0);
}
  • 円の基本スタイル
  • 幅・高さ50pxで正円にする（border-radius: 50%）
  • 上下マージン10px
  • 文字（A〜E）を中央に配置するため flex を使用
  • 初期位置は translateX(0) でスタート

.circle.anime

.circle.anime {
  animation-name: slide-right;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}
  • anime クラスが付くとアニメーションが適用される
  • アニメーション名：slide-right
  • 5秒かけてアニメーション
  • forwards によりアニメーション終了後も最後の位置を保持

各円の色と動きの種類

.circle1 { background-color: skyblue; animation-timing-function: ease; }
.circle2 { background-color: lightpink; animation-timing-function: ease-in; }
.circle3 { background-color: lightgreen; animation-timing-function: ease-out; }
.circle4 { background-color: violet; animation-timing-function: ease-in-out; }
.circle5 { background-color: yellow; animation-timing-function: linear; }
  • 円の色で見分けやすくしています
  • animation-timing-function によって動き方が異なります
  • 実際にスタートボタンを押して、違いを目で確認してみましょう

キーフレーム

@keyframes slide-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(250px); }
}
  • 円が横方向に移動するアニメーション
  • 左から0px → 右に250px移動

.btns とボタン

.btns {
  margin-top: 30px;
  text-align: center;
}

.btns button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #cc5252;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btns button:hover { background-color: #b34747; }
.btns button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}
  • ボタンを中央に配置
  • 見た目の装飾（色、角丸、ホバー時の変化）
  • disabled 状態時のスタイルを設定し操作不可を視覚的に表示

まとめ

  • .circle が5種類あり、色と animation-timing-function で動き方を比較できる
  • .circle.anime を付与することでアニメーション開始
  • .circles で中央揃えと左右線を表示
  • ボタンでスタート・リセットを操作

このCSSだけで、円の動きの違いを見せるデモを作ることができます。

CSSアニメーションについて詳しく解説しています👇

CSSアニメーションの基本ルールと実践ガイド
CSSアニメーションをこれから始める人必見！キーフレームやanimationプロパティの基礎から、サイトで使える実践的なテクニックまでを網羅して解説します。
dev.himadeshow.com
2025.10.24

アニメーションを動かすための最小限のJavaScript

const startBtn = document.querySelector('#startBtn');
const resetBtn = document.querySelector('#resetBtn');

const circles = document.querySelectorAll('.circle');

startBtn.addEventListener('click', () => {
  circles.forEach((circle) => {
    circle.classList.add('anime');
  });
  startBtn.disabled = true;
  resetBtn.disabled = false;
});

resetBtn.addEventListener('click', () => {
  circles.forEach((circle) => {
    circle.classList.remove('anime');
  });
  startBtn.disabled = false;
  resetBtn.disabled = true;
});

1. ボタンと円の取得

const startBtn = document.querySelector('#startBtn');
const resetBtn = document.querySelector('#resetBtn');
const circles = document.querySelectorAll('.circle');
  • #startBtn → スタートボタン
  • #resetBtn → リセットボタン
  • .circle → 5つの円の要素をすべて取得

2. スタートボタンの動作

startBtn.addEventListener('click', () => {
  circles.forEach((circle) => {
    circle.classList.add('anime');
  });
  startBtn.disabled = true;
  resetBtn.disabled = false;
});
  • スタートボタンをクリックすると発動
  • すべての円に anime クラスを追加 → CSSで設定したアニメーションが開始
  • スタートボタンを無効化（重複クリック防止）
  • リセットボタンを有効化

3. リセットボタンの動作

resetBtn.addEventListener('click', () => {
  circles.forEach((circle) => {
    circle.classList.remove('anime');
  });
  startBtn.disabled = false;
  resetBtn.disabled = true;
});
  • リセットボタンをクリックすると発動
  • すべての円から anime クラスを削除 → アニメーションがリセットされ、元の位置に戻る
  • スタートボタンを有効化
  • リセットボタンを無効化

まとめ

  • このJSは、CSSアニメーションを開始／リセットするだけのシンプルな制御
  • anime クラスの有無でアニメーションのON/OFFを切り替えている
  • ボタンの有効/無効も制御して、操作の順序を制限している

これだけで、スタート→動作→リセットの流れが完成します。

ボタンの有効・無効の状態を切り替える方法を詳しく👇

【JavaScript】disabledプロパティを使ってボタンの有効・無効の状態を切り替える方法
disabled属性をJavaScriptで操作して、ボタンを押せる状態・押せない状態に切り替える方法を紹介します。基本的なコード例とあわせて動作を確認できます。
dev.himadeshow.com
2025.09.27
【広告】
タイトルとURLをコピーしました