EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS Transition & Filter

CSS Transition

TransitionはCSSアニメーションの最もシンプルな方法で、どのプロパティがスムーズに変化するか、どれくらいの時間か、どのようなタイミングかを指定します。

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 省略形

サンプル

HTML 
<style>
.button {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.button:hover {
  background: #2980b9;
  transform: scale(1.05);
}
</style>
<button class="button">ホバーしてください</button>
▶ 試してみよう

CSS Filter

フィルタは要素にビジュアルエフェクトを適用します：

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% セピア調

サンプル

HTML 
<style>
.image {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.image:hover {
  filter: grayscale(0%);
}
</style>
<img class="image" src="/assets/images/tutorials/html-example-photo.webp" alt="写真">
▶ 試してみよう

Transition + Filterの組み合わせ

サンプル

HTML 
<style>
.card {
  filter: blur(2px) brightness(0.8);
  transition: filter 0.5s ease;
}
.card:hover {
  filter: blur(0) brightness(1);
}
</style>
<div class="card">ホバーでシャープになり明るくなる</div>
▶ 試してみよう

❓ よくある質問

Q transitionとanimationの違いは何ですか？
A transitionはトリガー（ホバーなど）が必要で、状態Aから状態Bにのみ移行——ループはありません。animationはトリガー不要で自動再生が可能で、複数のキーフレーム、ループ、リバースをサポートします。シンプルなインタラクションにはtransitionを、複雑な自動再生エフェクトにはanimationを使用します。
Q すべてのCSSプロパティをトランジションできますか？
A いいえ。一部のプロパティのみがトランジションをサポートします。`transform`と`opacity`が最もパフォーマンスが良く、ブラウザはGPUアクセラレーションを行えます。`width`、`height`、`top`、`left`はアニメーションしないでください——リフローとラグを引き起こします。
Q filter: blur()はパフォーマンスに問題を引き起こしますか？
A はい。blurはGPU負荷が高く、大きなエリアのぼかしはパフォーマンスの低下を引き起こします。小さな要素にのみblurを使用するか、ホバーのような短いインタラクションでのみ使用することをお勧めします。動画や大きな画像にblurを適用しないでください。

📖 まとめ

📝 演習

  1. ホバー時に0.3秒で背景色が変化し、若干のスケール増加があるボタンを作成してください。
  2. 画像ギャラリーを作成してください：画像はデフォルトでグレースケールで表示され、ホバー時にスムーズにカラフルになります。
  3. 「ナビゲーション下線アニメーション」を作成してください——ホバー時に下線が中央から展開します。
  4. filter + transitionを使用して、ホバー時に画像が明るくなり、若干ぼかしを加えてください。
100%