CSSのopacityを使ったフェードイントランジション

CSSトランジションによるフェード効果

opacityベースのフェードは、最も基本的なCSSトランジションです。要素の表示を透明から不透明（またはその逆）にスムーズに変化させ、洗練された出現/消失エフェクトを作成します。

CSSコード

.element {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.element.visible {
  opacity: 1;
}

動作の仕組み

opacityプロパティは0（完全に透明）から1（完全に不透明）までの値を受け付けます。opacityにtransitionを定義することで、ブラウザは指定された持続時間にわたってこれらの値を補間します。

• プロパティ: opacity — 要素の透明度を制御
• 持続時間: 0.3s — トランジションは300ミリ秒で完了
• タイミング関数: ease-in — ゆっくり始まり、終わりに向かって加速

パフォーマンスに関する注意

opacityトランジションはコンポジットレイヤーにのみ影響するため、GPUアクセラレーションされます。ブラウザはレイアウトの再計算やピクセルの再描画を行う必要がなく、既にレンダリングされたレイヤーのアルファ値を変更するだけです。これにより、opacityトランジションは使用できる最も軽量なアニメーションの一つとなります。

フェードのトリガー

JavaScriptによるCSSクラスの切り替えや、CSS疑似クラスでフェードをトリガーできます：

.element:hover {
  opacity: 0.7;
}

トランジションは双方向に再生されます — ホバーでフェードアウトし、カーソルが離れると完全な不透明度に戻ります。