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 に変化させます。
必要に応じて、繰り返し回数、往復、開始時間の遅延など動きをつけ加えることができます。

transition

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

使い方の基本例

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

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

transform

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

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

使い方の基本例

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

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

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

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

@keuframes

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

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

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
アニメーションの再生・停止状態

transition

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

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

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

2D 変形

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

3D 変形

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

具体例

@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 アニメーションに関するお話をします。この記事にご興味を持っていただけましたら、ぜひご参加ください！