CSSのanimationプロパティ：動きのあるデザインを作る方法

Posted on by

CSSのanimationプロパティを使うと、要素にアニメーション効果を簡単に追加できます。
ウェブサイトに視覚的な魅力を加え、インタラクティブでダイナミックなデザインを
実現するための必須スキルです。
本記事では、animationプロパティの基本から応用までを詳しく解説します。

animationプロパティとは？

animationプロパティは、CSSで要素にアニメーションを適用するためのプロパティです。
このプロパティを使用することで、要素のスタイルを時間をかけて変化させることができます。

基本構文

selector {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

各パラメータの説明

  1. name: アニメーションの名前（@keyframesで定義）。
  2. duration: アニメーションの継続時間（例：2s, 500ms）。
  3. timing-function: 速度曲線（例：ease, linear, ease-in, ease-out, ease-in-out）。
  4. delay: アニメーション開始までの遅延時間（例：0s, 1s）。
  5. iteration-count: 繰り返し回数（infiniteで無限）。
  6. direction: 再生方向（例：normal, reverse, alternate）。
  7. fill-mode: アニメーション終了後のスタイル（例：none, forwards, backwards, both）。

基本的な使い方

単純なフェードイン効果

要素を徐々に表示させるアニメーションを作成します。

コード例

div {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

結果

<div>要素が2秒かけて透明から不透明になります。

移動アニメーション

要素を左から右に移動させます。

コード例

div {
  animation: slide 3s ease-in-out infinite;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(300px);
  }
}

結果

要素が3秒かけて右に移動し、無限に繰り返します。

回転アニメーション

要素を回転させるアニメーションを作成します。

コード例

div {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

結果

要素が360度回転を繰り返します。

応用例とデザインテクニック

複数のプロパティを変化させる

一度に複数のプロパティを変更するアニメーションを作成します。

コード例

div {
  animation: transformScale 2s ease-in-out infinite;
}

@keyframes transformScale {
  0% {
    transform: scale(1);
    background-color: red;
  }
  50% {
    transform: scale(1.5);
    background-color: yellow;
  }
  100% {
    transform: scale(1);
    background-color: red;
  }
}

アニメーションを遅延させる

遅延を追加して、アニメーションの開始タイミングを調整します。

コード例

div {
  animation: fadeIn 2s ease-in-out 1s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

ポイント

  • **1s**は遅延時間を示します。
  • **forwards**はアニメーション終了後にスタイルを保持します。

交互アニメーション

再生方向を交互に変化させるアニメーションを作成します。

コード例

div {
  animation: bounce 2s ease infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50px);
  }
}

結果

要素が上下に交互に動きます。

タイミング関数の詳細

タイミング関数は、アニメーションの速度曲線を制御します。

主なタイミング関数

  • ease：デフォルト。緩やかに開始して終了。
  • linear：一定速度。
  • ease-in：ゆっくり開始。
  • ease-out：ゆっくり終了。
  • ease-in-out：ゆっくり開始し、ゆっくり終了。
  • cubic-bezier(n, n, n, n)：カスタマイズ可能。

コード例

div {
  animation: move 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(300px);
  }
}

よくある質問

Q1. アニメーションが動作しない原因は？

@keyframesの名前が一致しているか確認してください。
アニメーション対象のプロパティがアニメーション可能か確認してください
（例：width, transformなど）。

Q2. アニメーションを一時停止するには？

アニメーションを一時停止するには、animation-play-state: paused;を使用します。

コード例

div {
  animation: spin 2s linear infinite;
  animation-play-state: paused;
}

ベストプラクティス

簡潔なアニメーションを心がける
過剰なアニメーションは避け、目的に合った効果を使用しましょう。

パフォーマンスを意識
GPUを活用するtransformやopacityを優先的に使用。

ユーザビリティを重視
アニメーションはユーザー体験を向上させるために利用しましょう。

まとめ

CSSのanimationプロパティを使用すると、視覚的に魅力的なウェブサイトを簡単に作成できます。
本記事で紹介した基本的な使い方や応用テクニックを活用して、
ユーザーにとって印象的なアニメーションを実現してください。

さらに、タイミング関数や複数のプロパティを活用して、より複雑で洗練された動きを演出することも可能です。