transition-behavior

構文

/* キーワード値 */
transition-behavior: allow-discrete;
transition-behavior: normal;

/* グローバル値 */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;

値

allow-discrete

この要素では、離散アニメーションプロパティのトランジションが開始されます。

normal

この要素では、離散アニメーションプロパティのトランジションが開始されません。

解説

transition-behavior プロパティは、他のトランジションプロパティ、特に transition-property および transition-duration と組み合わせて使用する場合にのみ有益なプロパティです。再生時間が 0 でないアニメーションをするプロパティがなければ、トランジションは発生しないからです。

.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

transition-behavior の値は、一括指定の transition 宣言に含めることができます。一括指定に含める場合、すべてのプロパティを使用する、または既定値では、 allow-discrete 値は通常のアニメーション可能なプロパティに影響を与えません。以下の CSS は、上記の個別指定の宣言と同等です。

.card {
  transition: all 0.25s;
  transition: all 0.25s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

上記のスニペットでは、 transition プロパティを 2 回記述しています。最初のものは allow-discrete 値を記述していません。これによってブラウザー間の対応ができ、 transition-behavior に対応していないブラウザーでもカードの他のプロパティが確実にトランジションするようにしています。

離散アニメーションの挙動

離散アニメーションプロパティは一般的に、 2 つの値の間をアニメーションの 50% で切り替えます。

ただし例外があり、それは display: none または content-visibility: hidden との間でアニメーションする場合です。この場合、ブラウザーはアニメーションの間中、トランジションしたコンテンツが表示されるように、 2 つの値を切り替えます。

従って、例えば次のようになります。

• display を none から block （または他の表示可能な display 値）にアニメーションさせるときは、値が block に切り替わるのはアニメーションの 0% であり、期間中ずっと表示されます。
• display を block （または他の表示可能な display 値）から none にアニメーションさせるときは、値は none に切り替わるのはアニメーションの 100% です。

公式定義

形式文法

transition-behavior = 
  <transition-behavior-value>#  

<transition-behavior-value> = 
  normal          |
  allow-discrete  

例

ポップオーバーのトランジション

この例では、ポップオーバーが非表示から表示へトランジションしたり、戻したりするアニメーションをしています。

HTML

この HTML では、 <div> 要素に popover 属性を用いてポップオーバーとして宣言し、 <button> 要素に popovertarget 属性を用いてポップオーバーの表示コントロールとして指定しています。

<button popovertarget="mypopover">ポップオーバーを表示</button>
<div popover="auto" id="mypopover">これがポップオーバーです。アニメーションします。</div>

CSS

html {
  font-family: Arial, Helvetica, sans-serif;
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  /* 消滅アニメーションの最終状態 */
  opacity: 0;
  transform: scaleX(0);

  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
  /* 一括指定の transition プロパティを使用すると、次のように書くことができます。
    transition: 
      opacity 0.7s,
      transform 0.7s,
      overlay 0.7s allow-discrete,
      display 0.7s allow-discrete;

    または、これでも構いません。
    transition: all 0.7s allow-discrete;
  */
}

/* 詳細度は同じなので、効果を得るためには前記の [popover]:popover-open ルールの
後に記載する必要があります。 */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

アニメーションさせたいプロパティは opacity と transform の 2 つです。これらのプロパティの開始状態にはポップオーバー要素の既定の非表示状態（[popover] で選択）を設定し、終了状態にはポップオーバーを開いた状態（:popover-open 擬似クラスで選択）を設定します。そして、この 2 つの間でアニメーションするように transition プロパティを設定します。

アニメーションする要素は、表示されると最上位レイヤーへ移動し、（display: none で）非表示になると最上位レイヤーから除去されるため、以下のプロパティをトランジションする要素のリストに追加し、双方向でアニメーションが動作するようにしています。どちらの場合も、 transition-behavior: allow-discrete を一括指定して、トランジションのアニメーションを有効にしています。

• display: アニメーションする要素の出現と消滅の両方のアニメーションを通して表示される（display: blockに設定する）ために必要です。これがないと、消滅アニメーションは表示されません。結果として、ポップオーバーはただ消えてしまいます。
• overlay: 要素が最上位レイヤーから除去されるのをアニメーションが終わるまで確実に延期するようにするために必要です。これは、このような単純なアニメーションでは大差ありませんが、より複雑なケースでは、これを行わないと、要素がオーバーレイからすばやく除去され、アニメーションが滑らかでなくなったり、効果的でなくなったりすることがあります。

さらに、アニメーションの開始状態は @starting-style アットルール内に設定します。これは予期しない動作を避けるために必要です。既定では、要素の初回スタイル更新時、または display の種類が none から別の種類に変更された場合、トランジションは発生しません。@starting-style により、既定のスタイルを特有の制御方法で上書きすることができます。これがなければ、出現アニメーションは発生せず、ポップオーバーはただ現れるだけです。

結果

このコードは次のように表示されます。

仕様書

ブラウザーの互換性

関連情報

• overlay
• @starting-style
• CSS トランジションモジュール
• Four new CSS features for smooth entry and exit animations (developer.chrome.com, 2023)