【CSS】transition-behaviorプロパティを使って、displayプロパティをトランジション可能にする

2023年9月7日2023年9月19日

URLをコピーしました！

Chrome117から導入されるtransition-behaviorについて勉強しました。

displayとopacityを使ってフェードアウト

通常、displayをnoneに設定するとアニメーションが即座にキャンセルされます↓

Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none.
CSS Animations Level 1

しかし、以下のようにtransition-behaviorを指定すると可能になりました↓

.selector {
 transition: opacity 2s, display 2s;
 transition-behavior: allow-discrete;
 display:block;
 opacity: 1;
}

.selector:hover {
  display:none;
  opacity:0;
}

Chrome Canaryで動作確認Gif↓

displayの値が徐々に切り替わっているわけではなく、トランジションが終了する2秒まで待ってからnoneに切り替わっています。

以降よりtransition-behaviorについて学んだことについて記述します。

transition-behaviorの基礎

これまでプロパティのアニメーションタイプが「アニメーション不可・離散」以外の場合にトランジション可能でしたが、transition-behaviorを使うことで離散型も可能になりました↓

In CSS Transitions Level 2, when comparing the before-change style and after-change style for a given property, the property values are transitionable if:

They have an animation type that is neither not animatable nor discrete, or

The transition-behavior is allow-discrete and they have an animation type that is discrete.

CSS Transitions Level 2 | 2.1. The transition-property Property

どんなプロパティ？

補間可能なプロパティのみ遷移するか、離散プロパティも遷移するかを指定するためのプロパティです。↓

The transition-behavior property specifies whether transitions will be started or not for discrete properties.
2.5. The transition-behavior Property

補間可能なプロパティ例↓

opacity
width
color

離散プロパティ例↓

background-image
mask-image
visibility

離散プロパティは開始状態から終了状態に徐々に変化するのではなく、transition-durationで指定した秒数の半分で瞬時に切り替わります↓

When values with a discrete animation type are transitioned, they flip at 50% progress.
CSS Transitions Level 2 | 2.1. The transition-property Property

displayとcontent-visibilityは離散プロパティではないですが、transition-behaviorを指定すると、トランジション可能になります。
これらも徐々に変化するのではなく、transition-durationで指定した秒数で切り替わります↓

For transitions where display: none and content-visibility: hidden are one of the initial or final values, the visible value will be used for the entire duration of the transition.
Chrome 117 Beta | CSS transition-behavior property

指定できる値

以下の値が指定できます↓

none→補間可能プロパティのみトランジションさせる
allow-discrete→離散プロパティもトランジションさせる

挙動確認

.selector {
  transition: background-image 2s;
  transition-behavior: allow-discrete;
  background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
}

.selector:hover {
  background-image: linear-gradient(rgba(0, 255, 255, 0.5), rgba(255, 255, 0, 0.5));
}

上記コードで離散プロパティにtransition-behaviorを「指定しない・する」場合の違いについて確認します。

transition-behaviorを指定しない場合

ホバーした瞬間に切り替わっていることが分かります。

transition-behaviorを指定した場合

ホバーした瞬間に切り替わるのではなく、transition-durationで指定した秒数の半分で切り替わっていることが分かります。

注意点

注意点が2個あるので記述していきます。

transition-behaviorはtransitionショートハンドの後に書く
displayをトランジションさせる場合、allの指定をしない

transition-behaviorはtransitionショートハンドの後に書く

transition-behaviorをtransitionショートハンドと分けて書く場合、transition-behaviorをショートハンドより後に書かないと、離散プロパティがトランジションされません。

transitonショートハンドでtransition-behaviorの値が上書きされるためです↓

The syntax for specifying an item in the transition shorthand is as follows:

<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time> || <transition-behavior-value>
2.6. The transition Shorthand Property

間違った書き方↓

.selector {
 transition-behavior: allow-discrete;
 transition: all 2s; // transiton-behaviorの値がnoneで上書きされる
}

正しい書き方↓

.selector {
 transition: all 2s; 
 transition-behavior: allow-discrete;
}

displayをトランジションさせる場合、allの指定をしない

transition-propertyにallを指定した場合、displayのトランジションが効かなかったためです。

ちゃんとtransiton-peropertyにdisplayを指定する必要があります↓

.selector {
 transition: display 2s; 
 transition-behavior: allow-discrete;
}

ブラウザ対応状況

2023年9月07日段階で、Chrome117〜のみ対応してます↓