transition-behavior
transition-behavior は CSS のプロパティで、プロパティは、アニメーションの動作が離散であるプロパティにトランジションを始めるかどうかを指定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 117 | 117 | 129 | 17.4 | 117 | 17.4 | |
transition-behavior `transition-behavior` 値 | 117 | 117 | 129 | 17.4 | 117 | 17.4 |
基本構文
CSS
.popover {
transition: opacity 0.3s ease,
display 0.3s ease allow-discrete;
opacity: 1;
}
.popover:not(:popover-open) {
opacity: 0;
}
@starting-style {
.popover:popover-open {
opacity: 0;
}
}ライブデモ
実務での使いどころ
-
Popover のアニメーション
Popover API で表示されるポップオーバーに、displayの遷移を含むスムーズなアニメーションを適用する。
注意点
- @starting-style との組み合わせが前提となるケースが多い。
- 離散プロパティの遷移はアニメーション中間値ではなく、タイミングの切り替えとなる。
アクセシビリティ
- 表示・非表示のアニメーションは prefers-reduced-motion に対応し、即座に切り替わるようにする。