interpolate-size

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die interpolate-size CSS Eigenschaft ermöglicht es Ihnen, Animationen und Übergänge zwischen einem <length-percentage> Wert und einem intrinsischen Größenwert wie auto, fit-content oder max-content zu aktivieren.

Diese Eigenschaft wird typischerweise verwendet, um die width und/oder height eines Containers zwischen einem <length-percentage> und der vollen Größe seines Inhalts zu animieren (d.h. zwischen "geschlossen" und "offen" oder "verbergen" und "zeigen" Zuständen), wenn eine Animation einer Nicht-Box-Modell-CSS-Eigenschaft, wie transform, keine praktikable Lösung ist.

Hinweis: Das durch interpolate-size aktivierte Verhalten kann nicht standardmäßig im gesamten Web aktiviert werden, weil viele bestehende Webseiten Stylesheets verwenden, die annehmen, dass intrinsische Größenwerte nicht animiert werden können. Eine Standardaktivierung würde mehrere Rückwärtskompatibilitätsprobleme verursachen (siehe dazugehörige CSS WG Diskussion).

Syntax

css
/* Keyword values */
interpolate-size: allow-keywords;
interpolate-size: numeric-only;

/* Global values */
interpolate-size: inherit;
interpolate-size: initial;
interpolate-size: revert;
interpolate-size: revert-layer;
interpolate-size: unset;

Werte

allow-keywords

Aktiviert Interpolation zwischen einem <length-percentage> Wert und einem intrinsischen Größenwert, um Animationen zwischen diesen zu ermöglichen.

numeric-only

Das Standardverhalten — intrinsische Größenwerte können nicht interpoliert werden.

Beschreibung

Durch das Setzen von interpolate-size: allow-keywords wird die Interpolation zwischen einem <length-percentage> Wert und einem intrinsischen Größenwert aktiviert. Beachten Sie, dass dies nicht das Animieren zwischen zwei intrinsischen Größenwerten ermöglicht. Ein Ende der Animation muss ein <length-percentage> sein.

Der interpolate-size Wert wird vererbt, sodass das Animieren zu (oder von) einem intrinsischen Größenwert für ein gesamtes Dokument ermöglicht werden kann, indem er am Dokumentenstamm gesetzt wird:

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

Wenn Sie den Anwendungsbereich einschränken möchten, können Sie ihn auf dem betreffenden Containerelement setzen. Das folgende Beispiel ermöglicht die Interpolation von intrinsischen Größen nur für <main> und seine Nachkommen:

css
main {
  interpolate-size: allow-keywords;
}

Hinweis: Auch die Rückgabewerte der calc-size() Funktion können interpoliert werden. Tatsächlich wird durch das Einbeziehen von calc-size() in einen Eigenschaftswert automatisch interpolate-size: allow-keywords auf die Auswahl angewendet. Da interpolate-size, wie oben erwähnt, vererbt wird, ist es in den meisten Fällen die bevorzugte Lösung, um intrinsische Größenanimationen zu aktivieren. Sie sollten calc-size() nur verwenden, um intrinsische Größenanimationen zu ermöglichen, wenn diese auch Berechnungen erfordern.

Werte, die interpoliert werden können

Die folgenden intrinsischen Werte können derzeit in Animationen eingebunden werden:

Formale Definition

Anfangswertnumeric-only
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

interpolate-size = 
numeric-only |
allow-keywords

Beispiele

Grundlegende Verwendung von interpolate-size

Dieses Beispiel zeigt, wie interpolate-size: allow-keywords auf einem Dokument gesetzt wird, um Animationen mit einer intrinsischen Größe zu ermöglichen. Die Demo zeigt ein Charakter-Abzeichen/"Namensschild", das bei Hovern oder Fokussieren Informationen über den Charakter offenbart. Das Offenbaren wird durch eine height Transition zwischen einer festgelegten Länge und max-content verwaltet.

HTML

Das HTML enthält ein einzelnes <section> Element mit tabindex="0", sodass es über die Tastatur fokussiert werden kann. Das <section> enthält <header> und <main> Elemente, die jeweils eigene untergeordnete Inhalte haben.

html
<section tabindex="0">
  <header>
    <h2>Tanuki</h2>
  </header>
  <main>
    <p>Tanuki is the silent phantom of MDN.</p>
    <ul>
      <li><strong>Height</strong>: 3.03m</li>
      <li><strong>Weight</strong>: 160kg</li>
      <li><strong>Tech Fu</strong>: 7</li>
      <li><strong>Bad Jokes</strong>: 9</li>
    </ul>
  </main>
</section>

CSS

Im CSS setzen wir zuerst interpolate-size: allow-keywords auf dem :root, um es für das gesamte Dokument zu aktivieren.

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

Dann setzen wir die height des <section> auf 2.5rem und overflow auf hidden, sodass standardmäßig nur das <header> angezeigt wird. Außerdem spezifizieren wir eine transition, die die <section> height über 1 Sekunde während des Zustandswechsels animiert. Schließlich setzen wir die <section> height auf :hover und :focus auf max-content.

css
section {
  height: 2.5rem;
  overflow: hidden;
  transition: height ease 1s;
}

section:hover,
section:focus {
  height: max-content;
}

Der Rest des CSS wurde aus Gründen der Kürze ausgeblendet.

Ergebnis

Versuchen Sie, über das <section> zu hovern oder es über die Tastatur zu fokussieren — es wird zu seiner vollen Höhe animiert, wodurch der gesamte Inhalt sichtbar wird.

Spezifikationen

Specification
CSS Values and Units Module Level 5
# interpolate-size

Browser-Kompatibilität

Siehe auch