開発 2024.04.23

CSS Transition: 簡単にアニメーションを実装する方法

ウェブデザインにおいて、ユーザーインターフェースの改善や視覚的な魅力を高めるためには、アニメーションが重要な役割を果たします。CSS Transitionは、そのアニメーションを簡単に実装できる強力なツールです。本記事では、CSS Transitionの基本的な使い方と、その効果的な利用方法について解説します。

1 CSS Transitionとは？
2 基本的な使い方
3 実際の例
4 タイミング関数の詳細
5 まとめ

CSS Transitionとは？

CSS Transitionは、要素の状態が変わる際に、その変化を滑らかにするためのCSSプロパティです。例えば、ボタンの色が変わる際に一瞬で変わるのではなく、徐々に変化することで、ユーザーに対してより直感的なフィードバックを提供します。

基本的な使い方

CSS Transitionの基本的な構文は以下の通りです。

element {
  transition: property duration timing-function delay;
}

property: アニメーションさせたいCSSプロパティ
duration: 変化にかかる時間（例: 0.5s、200ms）
timing-function: 変化の速さのパターン（例: ease、linear、ease-in、ease-out）
delay: アニメーションが始まるまでの遅延時間

実際の例

例えば、ボタンの背景色をホバー時に変更する際の例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transition Example</title>
  <style>
    .button {
      background-color: #3498db;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    .button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <button class="button">Hover me!</button>
</body>
</html>

この例では、ボタンにホバーした際に背景色が滑らかに変化します。transitionプロパティを使用することで、background-colorが0.3秒かけて変化するように設定しています。