アニメーション・エフェクト

11個のプロパティ

backdrop-filter

アニメーション・エフェクトBaseline 新しく利用可能

要素の背後にあるコンテンツにフィルター効果を適用するプロパティです。ガラス効果やぼかし効果を作成できます。

Example

.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

filter

アニメーション・エフェクト

要素に視覚効果（ぼかし、明度調整、色相変更など）を適用するプロパティです。blur()、brightness()、contrast()、grayscale()など多数の関数があり、画像加工やデザイン効果を実現します。

Example

filter: blur(5px);

opacity

アニメーション・エフェクト

要素の透明度を指定するプロパティです。0（完全透明）から1（完全不透明）の間で指定します。子要素も含めて透明度が適用されるため、背景だけを透明にしたい場合はRGBAを使用します。

Example

opacity: 1;

transition

アニメーション・エフェクト

CSSプロパティの変化を滑らかにアニメーションするプロパティです。プロパティ名、持続時間、タイミング関数、遅延を指定でき、ユーザーインタラクションに対する自然な視覚フィードバックを提供します。

Example

transition: all 0.3s ease;

transform

アニメーション・エフェクト

要素の変形（移動、回転、拡大縮小など）を指定するプロパティです。translate()、rotate()、scale()、skew()などの関数を使用し、3D変形も可能です。アニメーションやインタラクティブなデザインに不可欠です。

Example

.hover-lift {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

animation

アニメーション・エフェクト

キーフレームアニメーションを制御するプロパティです。@keyframesで定義したアニメーション名、持続時間、タイミング関数、遅延、繰り返し回数、方向などを指定し、複雑なアニメーションを実現できます。

Example

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes

アニメーション・エフェクト

アニメーションの各段階を定義するルールです。@keyframes名前 { from { } to { } }または0%から100%のパーセンテージでアニメーションの途中状態を細かく指定できます。複雑で滑らかなアニメーションを実現するための基礎です。

Example

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@starting-style

アニメーション・エフェクトBaseline 新しく利用可能

要素が最初に表示された瞬間の「開始スタイル」を定義するアットルールです。display: noneからの表示やDOM追加直後の要素に、JavaScriptなしでフェードインなどの出現アニメーションを付けられます。transition-behavior: allow-discreteとの併用が定番です。

Example

dialog[open] {
  opacity: 1;
  transition: opacity 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;

  @starting-style {
    opacity: 0;
  }
}

dialog {
  opacity: 0;
}

view-transition-name

アニメーション・エフェクトBaseline 新しく利用可能

View Transitions APIで、状態変化の前後で「同じ要素」として扱う名前を付けるプロパティです。一覧→詳細への画像モーフのような遷移アニメーションを、ブラウザが前後のスナップショットから自動生成してくれます。

Example

.hero-image {
  view-transition-name: hero;
}

/* JS側: 状態変化をトランジションでラップ */
/* document.startViewTransition(() => updateDOM()); */

animation-timeline

アニメーション・エフェクト対応が限定的

アニメーションの進行を時間ではなくスクロール位置に連動させるプロパティです（スクロール駆動アニメーション）。読了プログレスバーやパララックス、ビューポートに入ったら動き出す演出をJavaScriptなしで実装できます。

Example

.progress-bar {
  transform-origin: left;
  animation: grow linear;
  animation-timeline: scroll();
}

@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

interpolate-size

アニメーション・エフェクト対応が限定的

height: autoのような「キーワード値」へのtransition/animationを可能にするプロパティです。アコーディオンの開閉など「0から自然な高さまで」のアニメーションが、max-heightハックやJavaScriptなしで書けるようになります。

Example

:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.3s, content-visibility 0.3s allow-discrete;
}

details[open]::details-content {
  height: auto;
}