animation-range-end

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

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 Beginn der Zeitleiste gemessen wird.
<timeline-range-name>: Gibt einen benannten Zeitleistenbereich innerhalb der gesamten Zeitleiste an. Der Bereich beginnt bei 0%.
<timeline-range-name> <length-percentage>: Gibt einen Längen- oder Prozentwert an, der vom Beginn des angegebenen benannten Zeitleistenbereichs gemessen wird.

Die animation-range-end Eigenschaft gibt das Ende des Anwendungsbereichs einer Animation an. Eine Änderung des Endes des Anwendungsbereichs kann potenziell das Ende der Animation verschieben, das heißt, der Punkt, an dem Keyframes mit 100% Fortschritt landen, wenn die Anzahl der Wiederholungen 1 beträgt, und kann auch die effektive Dauer der Animation verkürzen.

Der Eigenschaftswert kann normal, ein <length-percentage>, oder ein <timeline-range-name> mit einem optionalen <length-percentage> sein. Wenn der <timeline-range-name> Wert keinen <length-percentage> enthält, wird der Prozentsatz auf 100% festgelegt.

Die animation-range-end Eigenschaft ist in der animation Kurzform als ein Nur-Zurücksetzungswert enthalten. Dies bedeutet, dass die Verwendung der animation Kurzform jegliche zuvor deklarierte animation-range-end Werte auf normal zurücksetzt; die Kurzform kann nicht verwendet werden, um einen neuen animation-range-end Wert zu setzen. Beim Erstellen von CSS scroll-gesteuerten Animationen sollten Sie animation-range-end nach der Deklaration jeder animation Kurzform angeben, 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 mithilfe der 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 Ansichtsfortschritts-Zeitleiste mit einem Bereichsende

In diesem Beispiel wird animation-range-end auf ein Element angewendet, das über eine Ansichtsfortschritts-Zeitleiste 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 viel Text hinzugefügt, um sicherzustellen, dass der Inhalt seinen Container überläuft; der zusätzliche Text ist hier aus Gründen der Kürze verborgen.

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 hinzugefü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 Ansichtsfortschritts-Zeitleiste definiert, indem wir die view() Funktion als Wert der animation-timeline Eigenschaft gesetzt haben. 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 aus Gründen der Kürze verborgen.

.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 zu animieren. Schalten Sie dann das Kontrollkästchen am Ende des Textblocks um und scrollen Sie erneut. Beachten Sie, wie das Element die Animation beendet, wenn es 75% des Weges durch den Viewport ist, 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