CSSのtransition-behaviorプロパティは、トランジションで個別のプロパティを使用できるようにするtransitionプロパティの省略形です。
transition-behaviorの値にallow-discreteを設定すると、個別プロパティはアニメーションを開始し、50%で初期値から最終値へと反転します。
ただ、display: none;やcontent-visibility: hidden;が初期値または最終値のいずれかであるトランジションでは、トランジションする間にわたってvisible値が使用されます。
複数の個別プロパティを簡単にアニメーション化できます。
transition-behavior プロパティは、normal と allow-discrete の2つの値を指定できます。
- normal
離散プロパティのトランディションは開始されず、補間可能なプロパティのみトランディションが開始される - allow-discrete
補間可能なプロパティだけでなく、離散プロパティもトランジションが開始される
※補間可能なプロパティ: opacity, color, margin etc.
※離散プロパティ: box-shadow, custom property, display, etc.
【参考】
https://coliss.com/articles/build-websites/operation/css/adds-6-new-css-features-in-chrome-117.html
