CSS Reference

transition-behavior

離散アニメーションプロパティのトランジション開始を指定する

transition-behavior プロパティは、離散アニメーションプロパティに対して、トランジションを開始するかどうかを指定します。

離散アニメーションプロパティとは

アニメーションプロパティは、「Web Animations」仕様において、以下の4種類が定義されています。また、各プロパティが、これらのうち、何に分類されるかについては、各プロパティごとに定義されています（一部、プロパティ独自のアニメーション種類を持つプロパティもあります）。

アニメーション不可（not animatable）

「アニメーション不可」タイプのプロパティはアニメーションできません。アニメーションのキーフレームにリストされていても無視され、トランジションにも影響されません。

アニメーションすることで複雑すぎる動作が発生するケースがあるなどの理由で、プロパティがアニメーションから除外されることがあります。例えば、transition-behavior プロパティも該当しますが、アニメーションの動作を定義するプロパティ自体がアニメーションすると、再帰的な挙動が生じるため、通常はアニメーション不可となっています。

なお、アニメーション不可なプロパティのみを対象にしたアニメーションでも、イベントの発火やアニメーションの完了の遅延などの通常のアニメーション効果は依然として発生します。

離散アニメーション（discrete）

「離散アニメーション」タイプのプロパティは、値が連続的に変化することなく切り替わります。具体的には、トランジションの途中（50%の時点、p=0.5）で値が Va から Vb に一気に切り替わります。そのため、プロパティの値の間で加算や補間などの操作は行われません。display プロパティなどがこれに該当します。

計算値によるアニメーション（by computed value）

「計算値によるアニメーション」タイプのプロパティでは、計算済みの値の対応する個々のコンポーネントが、その値のタイプに応じて補間、加算、または累積されます。opacity や width、height プロパティが該当します。

もし、対応するコンポーネントの数や型が一致しない場合、またはコンポーネントが離散アニメーションを使用し、対応する2つの値が一致しない場合は、プロパティ値は離散アニメーションとして組み合わされます。

繰り返し可能なリスト（repeatable list）

「計算値によるアニメーション」と同じですが、2つのリストのアイテム数が異なる場合、それらは最小公倍数の数まで繰り返されてから組み合わされます。

各アイテムは「計算値によるアニメーション」と同じように組み合わされます。もし組み合わせられないペアの値や、離散アニメーションを使用するコンポーネント値がある場合、プロパティ値は離散アニメーションとして組み合わされます。

box-shadow プロパティや、background 一括指定プロパティなどがこれに該当します。

transition-behavior プロパティの役割

transition-behavior プロパティは、この「離散アニメーション」に分類されるプロパティに対して、トランジションを開始開始するかどうかを指定することができます。

例えば、ある要素に下記のような指定をしたとします。

transition-property: opacity, transform, overlay, display;
transition-duration: 0.75s;

しかし、この状態では、display プロパティや overlay プロパティはアニメーションせず、瞬時に状態が切り替わってしまうため、透明度（opacity）などが変化するのを待たず、表示されたり、非表示になったりします（つまりアニメーション効果が描写されません）。

そこで、下記のように、transition-behavior プロパティを使用することで、display プロパティなどにもトランジションの指定が有効になるように指定します。

transition-property: opacity, transform, overlay, display;
transition-duration: 0.75s;
transition-behavior: allow-discrete;

transition-behavior プロパティに指定できる値は下記の通りです。

normal この要素では、離散アニメーションプロパティのトランジションが開始されません。（既定値）
allow-discrete この要素では、離散アニメーションプロパティのトランジションが開始されます。

なお、transition-behavior プロパティは、下記のように、transition 一括指定プロパティを使用して指定することもできます。

transition: all 0.75s allow-discrete;

transition-behaviorの仕様

初期値
  • normal
対象となる要素
  • すべての要素
継承
  • なし

transition-behaviorのサンプルソース

.sample {
  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.75s;
  transition-behavior: allow-discrete;
}

/* transition 一括指定プロパティを使用した例 */
.sample {
  transition: 
    opacity 0.75s,
    transform 0.75s,
    overlay 0.75s allow-discrete,
    display 0.75s allow-discrete;
}
/* popover 属性を用いたポップオーバー要素にアニメーションを指定した例 */
[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.75s allow-discrete;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome