CSSアニメーションでサイトに動きをつけよう - animation基礎

CSSのanimationとは

CSSのanimation（CSSアニメーション）とは、CSS（Cascading Style Sheets）を使用してウェブページやアプリケーションに動きや変化を追加するための技術です。
要素に対してアニメーション効果を適用することで、トランジション（遷移）やキーフレームアニメーションなどさまざまな動きを制御することができます。

アニメーションは要素のスタイルプロパティを時間で変化させることによって実現されます。
CSS animationを使用することで、要素の表示や非表示の切り替え、移動、回転、色の変化など、さまざまな動きを作り出すことができます。

CSSアニメーションは、@keyframesルールとanimationプロパティを使用して定義されます。@keyframesルールは、アニメーションのキーポイント（開始、終了、中間のステップ）を指定し、animationプロパティはアニメーションの設定（再生時間、繰り返し回数、イージングなど）を指定します。

例えば、要素を徐々にフェードインさせるアニメーションを作成したい場合、@keyframesルールでフェードインのキーポイントを指定し、animationプロパティでアニメーションの詳細な設定を行います。
このようにCSS Animationを使用して要素に動きを追加することができます。

CSSアニメーションは、Webデザインにおける技術の一つとしてサイトやアプリに魅力的な動きを追加するのに非常に役立ちます。
ここからは初心者向けにCSSアニメーションの基本的な使い方を解説します。

まずはCSSでanimationを実装してみる

まずはCSSでanimationを使用して動きをつけることを体験してみましょう。
下記のサンプルコードを実装してみてください。

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>

style.css

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: slide;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

このサンプルコードをブラウザで表示すると、単一の赤いボックスが表示されます。
CSSファイルで定義された.boxクラスにより、ボックス要素にアニメーションが適用されます。

animation-nameプロパティで使用するキーフレーム名を指定し、animation-durationプロパティでアニメーションの時間を2秒に設定しています。
animation-delayプロパティは1秒の遅延を設定し、animation-iteration-countプロパティでアニメーションの繰り返し回数を無限に設定しています。
animation-directionプロパティでは、アニメーションの方向性を交互にするように設定しています。

@keyframesルールでslideというキーフレームを定義し、0%から100%の範囲で要素を水平方向に200px移動させるアニメーションが記述されています。

このコードを実行すると、ボックスが2秒かけて左から右に移動し、右端に到達した後に左に戻るというアニメーションが無限に繰り返されます。
数値を変更してアニメーションの変化を確認してみましょう。

キーフレーム

キーフレームはアニメーションの開始、終了、および中間のステップを指定します。例えば、要素をフェードインさせるアニメーションを作成する場合、キーフレームは「0% { opacity: 0; }」と「100% { opacity: 1; }」のようになります。

animationプロパティ

animationプロパティはアニメーションの動作を制御します。例えば、アニメーションの再生時間、繰り返し回数、イージングなどを指定できます。

CSS Animationの実装方法

@keyframes ルールの作成

最初に、@keyframesルールを使用してアニメーションのキーフレームを定義します。以下はフェードインアニメーションの例です。

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

アニメーションを適用する要素の選択

アニメーションを適用したい要素を選択します。
例えば、クラス名が「box」の要素にアニメーションを適用する場合、以下のようにします。

CSS

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: 3;
  animation-timing-function: ease-in-out;
}

アニメーションのプロパティ設定

アニメーションのプロパティを指定します。上記の例では、アニメーションの再生時間が2秒、遅延が1秒、繰り返し回数が3回、イージングがease-in-outに設定されています。
イージングとは動きの加減速など変化を表現するオプションです。

その他のアニメーションオプション

アニメーションの方向性

アニメーションの方向性を指定することもできます。以下は要素を左から右にスライドさせるアニメーションの例です。

CSS

.slideIn {
  animation-name: slide;
  animation-duration: 1s;
  animation-direction: alternate;
}

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

アニメーションの一時停止と再生

アニメーションを一時停止させたり再生させたりすることも可能です。
以下はボタンをクリックしたときにアニメーションを一時停止する例です。

CSS

.pauseOnButtonClick {
  animation-name: slide;
  animation-duration: 2s;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.pause-button {
  animation-play-state: paused;
}

イベントによるアニメーションのトリガー

特定のイベントに応じてアニメーションをトリガーすることもできます。
以下は要素がマウスオーバーされたときにアニメーションが発生する例です。

CSS

.hoverAnimation {
  animation-name: pulse;
  animation-duration: 1s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.element:hover {
  animation-play-state: running;
}

まとめ

この記事では初心者向けにCSSアニメーションの基本的な使い方を解説しました。
アニメーションを作成する際にはキーフレームの作成、アニメーションの適用要素の選択、プロパティの設定などを行います。
さらにアニメーションの方向性、一時停止と再生、イベントトリガーによるアニメーションなどのオプションも存在します。

CSSアニメーションはWebデザインにおいて非常にパワフルなツールですので、ぜひ実践しながら練習してみてください。
素晴らしいアニメーションを作成し、ウェブサイトやアプリをより魅力的にすることができます。