`animation-range-end` CSS property

Baseline 2026

Neu verfügbar

Seit April 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die animation-range-end CSS Eigenschaft legt den Punkt auf der Zeitleiste fest, an dem eine Animation enden soll.

Syntax

css

/* Keyword or length percentage value */
animation-range-end: normal;
animation-range-end: 80%;
animation-range-end: 700px;

/* Named timeline range value */
animation-range-end: cover;
animation-range-end: contain;
animation-range-end: cover 80%;
animation-range-end: contain 700px;

/* Global values */
animation-range-end: inherit;
animation-range-end: initial;
animation-range-end: revert;
animation-range-end: revert-layer;
animation-range-end: unset;

Werte

normal: Repräsentiert das Ende der Zeitleiste. Dies ist der Standardwert.
<length-percentage>: Gibt einen Längen- oder Prozentwert an, der vom Anfang der Zeitleiste gemessen wird.
<timeline-range-name>: Gibt einen benannten Zeitrahmen innerhalb der gesamten Zeitleiste an. Der Bereich endet bei 100%.
<timeline-range-name> <length-percentage>: Gibt einen Längen- oder Prozentwert an, der vom Anfang des angegebenen benannten Zeitrahmens gemessen wird.

Die animation-range-end-Eigenschaft gibt das Ende des Anhangsbereichs der Animation an. Wenn das Ende des Anhangsbereichs verändert wird, kann sich das Ende der Animation, das bedeutet der Punkt, an dem Keyframes auf 100% Fortschritt landen, wenn die Iterationsanzahl 1 ist, verschieben und kann auch die effektive Dauer der Animation verringern.

Der Eigenschaftswert kann normal, ein <length-percentage> oder ein <timeline-range-name> mit optionalem <length-percentage> sein. Falls der <timeline-range-name>-Wert keinen <length-percentage> beinhaltet, wird der Prozentsatz standardmäßig auf 100% gesetzt.

Die animation-range-end-Eigenschaft ist in der animation-Kurzform als ein Nur-Zurücksetzungswert enthalten. Das bedeutet, dass die Verwendung der animation-Kurzform jeden zuvor erklärten animation-range-end-Wert auf normal zurücksetzt; die Kurzform kann nicht verwendet werden, um einen neuen animation-range-end-Wert zu setzen. Beim Erstellen von scroll-getriebenen CSS-Animationen sollten Sie animation-range-end nach der Deklaration einer animation-Kurzform erklären, um zu vermeiden, dass der Wert auf normal zurückgesetzt wird.

Die animation-range-end-Eigenschaft kann zusammen mit der animation-range-start-Eigenschaft auch durch die animation-range-Kurzform gesetzt werden.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	alle Elemente
Vererbt	Nein
Prozentwerte	Relative to the specified named timeline range if specified, otherwise relative to the entire timeline
Berechneter Wert	A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage
Animationstyp	Not animatable

Formale Syntax

animation-range-end = 
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Erstellen einer Ansichtsfortschrittszeitleiste mit einem Endbereich

In diesem Beispiel wird animation-range-end auf ein Element angewendet, das über eine Ansichtsfortschrittszeitleiste animiert wird. Dies bewirkt, dass die Animation ihren letzten Keyframe erreicht, bevor das Element das Ende seines umgebenden Viewports erreicht.

HTML

<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>
</div>

In der Mitte eines langen Textblocks haben wir ein Element eingefügt, das wir animieren werden. Wir haben zusätzlichen Text hinzugefügt, um sicherzustellen, dass der Inhalt seinen Container überfüllt; der zusätzliche Text ist hier zur Kürze versteckt.

html

<div class="animatedElement">

<p>
  Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
  cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
  dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non tellus
  orci ac auctor augue mauris. Risus quis varius quam quisque id diam vel quam
  elementum. Nibh praesent tristique magna sit amet purus gravida quis. Duis
  ultricies lacus sed turpis tincidunt id aliquet. In egestas erat imperdiet sed
  euismod nisi. Eget egestas purus viverra accumsan in nisl nisi scelerisque.
  Netus et malesuada fames ac.
</p>
<p>

Wir haben auch ein Kontrollkästchen eingefügt, das die animation-fill-mode-Eigenschaft umschaltet, sodass Sie sehen können, wie sich diese Eigenschaft auf Animationen mit verkürzten Zeitleisten auswirkt.

html

<label>
  <input type="checkbox" /> Add <code>animation-fill-mode: forwards;</code>
</label>

  </p>
</div>

CSS

Wir haben eine Ansichtsfortschrittszeitleiste definiert, indem wir eine view()-Funktion als Wert der animation-timeline-Eigenschaft setzen. Dies wird nach der animation-Kurzform deklariert, um zu vermeiden, dass der Langform-Eigenschaftswert zurückgesetzt wird.

Wir haben auch animation-range-end gesetzt, um die Animation früher enden zu lassen als erwartet.

css

.animatedElement {
  background-color: deeppink;
  animation: appear 1ms linear;
  animation-timeline: view();
  animation-range-end: exit 25%;
}

@keyframes appear {
  from {
    background-color: rebeccapurple;
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    background-color: darkturquoise;
    opacity: 0.75;
    transform: scaleX(0.75);
  }
}

Wenn das Kontrollkästchen aktiviert ist, wird die animation-fill-mode-Eigenschaft auf das animierte Element angewendet:

css

:has(:checked) .animatedElement {
  animation-fill-mode: forwards;
}

Die anderen in diesem Beispiel angewendeten Stile sind hier zur Kürze versteckt.

.animatedElement {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

:has(:checked) .animatedElement {
  animation-fill-mode: both;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
@supports not (animation-range-end: normal) {
  body::before {
    content: "Your browser does not support the 'animation-range-end' property.";
    color: black;
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Ergebnis

Scrollen Sie, um das Element animieren zu sehen. Schalten Sie dann das Kontrollkästchen am Ende des Textblocks um, und scrollen Sie erneut. Beachten Sie, wie das Element seine Animation beendet, wenn es 75% des Viewportwegs erreicht hat, und wie es zu seinem Standardzustand zurückkehrt, wenn die animation-fill-mode-Eigenschaft nicht angewendet wird.

Spezifikationen

Spezifikation
Scroll-driven Animations # animation-range-end

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

animation-range-end CSS property

HTML

CSS

Ergebnis

Help improve MDN

`animation-range-end` CSS property