CSS Reference

interpolate-size

内在サイズ指定キーワードを補間する

interpolate-size プロパティは、Intrinsic size（内在サイズ）指定キーワード（<intrinsic-size-keyword>）を補間し、アニメーションを可能にします。

既存の CSS では、自動サイズや最小コンテンツサイズ、例えば auto や min-content、stretch といった、Intrinsic size（内在サイズ / その要素の内容に基づきサイズが決定する）に該当するキーワード値によって要素のサイズが指定されている場合、CSS アニメーションが有効になりません。つまり、アニメーションさせるには、要素に対して px や % などの値を用いてサイズを明示する必要があります。

例えば、下記のようなスタイルがあったとして、:hover 時などに .sample の横幅がアニメーションによって可変することを期待したとしても、実際にはアニメーションは動作せず、サイズは瞬間的に変化することになります。

.sample {
  width: 80px;
  transition: width 0.35s ease;

  &:hover,
  &:focus-visible {
    width: max-content;
  }
}

interpolate-size プロパティは、この挙動を変更します。interpolate-size: allow-keywords; をルート要素に指定することで、ウェブページ全体に対して、サイズの補間を有効にし、auto や min-content といったキーワード値で要素のサイズを指定したとしても、アニメーションを動作させることができます。

特に互換性に問題がない場合、前述のようにルート要素に対してこの指定をすることで、より直感的、かつ実装しやすい形でアニメーションの適用が可能になります。

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

numeric-only <intrinsic-size-keyword> を補間しません。（既定値）
allow-keywords 2つの値のうち、1つが <intrinsic-size-keyword> 値、もう1つが <length-percentage> 値の場合、<intrinsic-size-keyword>を補間します。
その際 <intrinsic-size-keyword> は calc-size(keyword, size) のように扱われます。2つの値ともが、<intrinsic-size-keyword> の場合、<intrinsic-size-keyword> は補間できません。

interpolate-size: allow-keywords を指定したとしても、アニメーションさせたい要素のサイズが、通常時、変化後、どちらも <intrinsic-size-keyword> で指定されていた場合、サイズの補間ができないため、アニメーションは動作しません。どちらか1つは、<length-percentage> 値で指定しなければなりません。

interpolate-sizeの仕様

初期値
  • numeric-only
対象となる要素
  • すべての要素
継承
  • あり

interpolate-sizeのサンプルソース

:root {
  interpolate-size: allow-keywords;
}

.sample {
  width: 80px;
  transition: width 0.35s ease;

  &:hover,
  &:focus-visible {
    width: max-content;
  }
}
:root {
  interpolate-size: allow-keywords;
}

/* × 下記の指定は、2つのサイズがどちらも内在サイズのため、アニメーションは動作しません */
.sample {
  width: auto;
  transition: width 0.35s ease;

  &:hover,
  &:focus-visible {
    width: max-content;
  }
}

主要ブラウザの対応

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