CSSアニメーションの基礎

こんにちは。田村です。
今回は、CSSアニメーション の基礎についてご紹介します。特に、よく使われる3つの要素を中心に解説していきたいと思います。

CSSアニメーションの代表的な手法

CSSアニメーションには大きく分けて3つの方法があります。
@keyframes + animation
transition
transform

animation と transition は「要素の動き」を担当し、それぞれ得意とする場面が異なります。transform は「見た目の変形」を担当します。
では、順に見ていきましょう。

@keyframes + animation

複数ステップ（0%, 50%, 100% など）を自由に設定
ループや往復、複雑な動きを実装しやすい

使い方の基本例

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

.my-element {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  /* 他にも animation-delay, direction, fill-mode などを追加可能 */
}

上記の例では、要素の透明度を 2秒かけて 0 → 1 に変化させます。
必要に応じて、繰り返し回数、往復、開始時間の遅延など動きをつけ加えることができます。

CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

CSS アニメーションにより、ある CSS のスタイル設定を別の設定へと遷移させることができます。アニメーションは、2 種類の要素で構成されています。 それは、アニメーションについて記述す...

transition

ホバーやクリック、フォーカスなどの状態変化 に対して「指定したプロパティを徐々に変化」
シンプルなボタン演出やフェード、色変化などに最適
ループや往復など複雑な動きには不向き

使い方の基本例

.my-element {
  transition: transform 0.5s ease; 
}
.my-element:hover {
  transform: scale(1.2);
}

上記の例では、ホバーした瞬間に transform を変化させることで、ふわっと拡大するアニメーションを実装できます。

CSS トランジションの使用 - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

CSS トランジションは、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわた...

transform

要素の 2D/3D変形（移動、 回転、 拡大縮小、 傾斜など）を指定
GPUアクセラレーションが効きやすく、width や heightに影響を与えないため、パフォーマンスが良い
単独ではアニメーションしないが、transition や animation と組み合わせると強力

GPUアクセラレーションと高パフォーマンス
transform をアニメーションに使うと、要素の位置や形状を視覚的に変形するだけなので、レイアウトの再計算を必要としない場合が多く、動作が軽快です。
ただし、乱用してレイヤーが増えすぎると、逆にパフォーマンスを下げる原因にもなるため注意しましょう。

使い方の基本例

.my-element {
  transform: translateX(50px); /* 50px 右に移動 */
}

translate(), rotate(), scale(), skew() などを組み合わせると、さまざまな動きを表現できます。
単独指定ではアニメーションしませんが、transition や @keyframes + animation と組み合わせることで滑らかに動かせます。

CSS 座標変換の使用 - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

CSS 座標変換 (CSS transforms) は、座標空間を編集することで、通常の文書フローを混乱させずに影響下にあるコンテンツの形状や位置を変えることができます。このガイドは座標変換の使用に...

アニメーションの動きを決める要素

ここでは、@keyframes 、animationと transitionそれぞれの動きを制御するプロパティをまとめます。

@keuframes

@keuframes
アニメーションの具体的な動きを定義するアットルールです。

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

@keyframes - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

@keyframes は CSS のアットルールで、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御しま...

animation

animation-name
アニメーションの識別名
animation-duration
アニメーション全体にかける時間
animation-timing-function
アニメーションの加速・減速の仕方
ease, linear, ease-in, ease-out, cubic-bezier() など
animation-delay
アニメーションを開始するまでの待機時間
animation-iteration-count
繰り返し回数（1回、2回、infinite など）
無限ループさせたい時は infinite
animation-direction
行って戻る往復
normal、reverse、alternate、alternate-reverse など
animation-fill-mode
アニメーション開始前・終了後のスタイルをどうするか
none, forwards, backwards, both
animation-play-state
アニメーションの再生・停止状態

animation - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

animation は CSS の一括指定プロパティで、スタイルの間のアニメーションを適用します。これは animation-name, animation-duration, animation-timing-function, animation-delay, animati...

transition

transition-property
変化させたいCSSプロパティ
transition-duration
変化にかける時間
transition-timing-function
加速・減速の仕方
ease, linear, ease-in, ease-out, cubic-bezier() など
transition-delay
変化を開始するまでの待機時間

transition - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay、 transition-behavior の一括指定プロパティです。

見た目の変形を決める要素

以下は、transform で利用できる主な関数です。

2D 変形

matrix()
同次変換行列
translate()
移動
scale()
拡大縮小
rotate()
回転
skew()
傾斜

3D 変形

matrix3d()
translate3d()
scale3d()
rotate3d()

transform - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

transform は CSS のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。 これは、 CSS の視覚整形モデルの座標空間を変更します。

具体例

@keyframes × transform で無限ループ（回転アニメーション）

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes で transform: rotate() を指定し、1秒ごとに 0 → 360度 へ変化
infinite を付けているため、ずっと回り続けるローディングアイコンが完成します。

transition × transform でホバー拡大

ふわっ

.my-element {
  transition: transform 0.5s ease;
}

.my-element:hover {
  transform: scale(1.2);
}

マウスホバーのタイミングで要素が拡大し、ふわっとした演出を加えられます。

まとめ

animation ( @keyframes )
複数ステップ や 繰り返し, 往復 など複雑な動きに最適
transition
ホバーやクリックなど状態変化 に伴う1ステップの動きに便利
transform
要素の 2D / 3D 変形を行うプロパティ
translate(), rotate(), scale() など見た目の動きを作れる
GPU アクセラレーションが働きやすく、高いパフォーマンスを期待できるが、使いすぎに注意

それぞれの特性をうまく組み合わせて、スムーズなアニメーションを取り入れてみてください。

告知

2025年1月31日（金）21:00～29:00 開催の「#朝までマークアップ 2（CSS編）」に出演いたします。
当日は、CSS アニメーションに関するお話をします。この記事にご興味を持っていただけましたら、ぜひご参加ください！

#朝までマークアップ 2（CSS編）

CSS Nite

2025-01-31（金）21:00 - 2025-02-01（土）05:00 2023年11月に開催した#朝までマークアップ、今回はCSS特集で開催します。23組24名の猛者が持ち時間10分、合計8時間のボリュームでお届けしま...