CSS: CSS Transition & Filter
最終更新：2026-10-13
1. CSS Transition
TransitionはCSSアニメーションの最もシンプルな方法で、どのプロパティがスムーズに変化するか、どれくらいの時間か、どのようなタイミングかを指定します。
(1) Transitionプロパティ
| プロパティ | 値 | 用途 |
|---|---|---|
transition-property |
all、color、transform |
どのプロパティをアニメーションするか |
transition-duration |
0.3s、500ms |
トランジションの時間 |
transition-timing-function |
ease、linear、ease-in、ease-out |
速度カーブ |
transition-delay |
0s、0.2s |
開始前の遅延 |
transition |
all 0.3s ease |
省略形 |
▶ サンプル
▶ 試してみよう2. CSS Filter
フィルタは要素にビジュアルエフェクトを適用します：
(1) Filter関数
| 関数 | 値 | 効果 |
|---|---|---|
blur() |
5px、10px |
ガウスぼかし |
brightness() |
0.5、1.5 |
暗く/明るく |
contrast() |
0.5、2 |
コントラストの調整 |
grayscale() |
0%、100% |
グレースケールの量 |
hue-rotate() |
90deg、180deg |
色相の回転 |
invert() |
0%、100% |
色の反転 |
opacity() |
0.5、1 |
透明度 |
saturate() |
0.5、2 |
彩度の調整 |
sepia() |
0%、100% |
セピア調 |
▶ サンプル
▶ 試してみよう3. Transition + Filterの組み合わせ
▶ サンプル
▶ 試してみよう❓ よくある質問
Q transitionとanimationの違いは何ですか？
A transitionはトリガー（ホバーなど）が必要で、状態Aから状態Bにのみ移行——ループはありません。animationはトリガー不要で自動再生が可能で、複数のキーフレーム、ループ、リバースをサポートします。シンプルなインタラクションにはtransitionを、複雑な自動再生エフェクトにはanimationを使用します。
Q すべてのCSSプロパティをトランジションできますか？
Q filter: blur()はパフォーマンスに問題を引き起こしますか？
A はい。blurはGPU負荷が高く、大きなエリアのぼかしはパフォーマンスの低下を引き起こします。小さな要素にのみblurを使用するか、ホバーのような短いインタラクションでのみ使用することをお勧めします。動画や大きな画像にblurを適用しないでください。
📖 まとめ
- TransitionはCSSアニメーションの最もシンプルな形式で、どのプロパティをアニメーションするか、持続時間、タイミングを指定
- Filterは強力な画像処理を提供——ぼかし、グレースケール、色の調整
- 両方を組み合わせると（ホバーフィルタエフェクトなど）、豊富なインタラクティブフィードバックが作成可能
📝 練習問題
- ホバー時に0.3秒で背景色が変化し、若干のスケール増加があるボタンを作成してください。
- 画像ギャラリーを作成してください：画像はデフォルトでグレースケールで表示され、ホバー時にスムーズにカラフルになります。
- 「ナビゲーション下線アニメーション」を作成してください——ホバー時に下線が中央から展開します。
- filter + transitionを使用して、ホバー時に画像が明るくなり、若干ぼかしを加えてください。
