animation-range-end
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die animation-range-end CSS Eigenschaft legt den Punkt auf der Zeitlinie fest, an dem eine Animation enden soll.
Syntax
/* 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 Zeitlinie. Dies ist der Standardwert.
<length-percentage>-
Gibt einen Längen- oder Prozentwert an, gemessen vom Anfang der Zeitlinie.
<timeline-range-name>-
Bezeichnet einen benannten Zeitlinienbereich innerhalb der gesamten Zeitlinie. Der Bereich beginnt bei
0%. <timeline-range-name> <length-percentage>-
Gibt einen Längen- oder Prozentwert an, gemessen vom Anfang des angegebenen benannten Zeitlinienbereichs.
Beschreibung
Die Eigenschaft animation-range-end legt das Ende des Anbindungsbereichs der Animation fest. Die Änderung des Endes des Anbindungsbereichs kann potenziell das Ende der Animation verschieben, also den Punkt, an dem Keyframes bei einem Fortschritt von 100% landen, wenn die Iterationsanzahl 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 als Standardprozentsatz 100% angenommen.
Die Eigenschaft animation-range-end ist in der animation Kurzschreibweise als reiner Reset-Wert enthalten. Das bedeutet, dass bei der Verwendung der animation-Kurzschreibweise jeder zuvor deklarierte animation-range-end-Wert auf normal zurückgesetzt wird; die Kurzschreibweise kann nicht verwendet werden, um einen neuen animation-range-end-Wert festzulegen. Beim Erstellen von CSS scroll-gesteuerten Animationen sollten Sie animation-range-end nach jeder animation-Kurzschreibweise deklarieren, um zu verhindern, dass der Wert auf normal zurückgesetzt wird.
Die Eigenschaft animation-range-end, zusammen mit der animation-range-start Eigenschaft, kann auch mithilfe der animation-range Kurzschreibweise 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 Fortschrittsansicht-Zeitlinie mit einem Bereichsende
In diesem Beispiel wird animation-range-end auf ein Element angewendet, das über eine Fortschrittsansicht-Zeitlinie animiert wird. Dies führt dazu, dass die Animation ihren letzten Keyframe erreicht, noch bevor das Element das Ende seines enthaltenen Viewports erreicht.
HTML
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 überflutet; der zusätzliche Text ist der Kürze halber hier ausgeblendet.
<div class="animatedElement"></div>
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 Zeitlinien auswirkt.
<label>
<input type="checkbox" /> Add <code>animation-fill-mode: forwards;</code>
</label>
CSS
Wir haben eine Fortschrittsansicht-Zeitlinie definiert, indem wir eine view() Funktion als Wert der animation-timeline Eigenschaft gesetzt haben. Diese wird nach der animation Kurzschreibweise deklariert, um zu vermeiden, dass der Langschreibwerte zurückgesetzt wird.
Wir haben auch animation-range-end gesetzt, damit die Animation früher als erwartet endet.
.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:
:has(:checked) .animatedElement {
animation-fill-mode: forwards;
}
Die anderen in diesem Beispiel angewendeten Stile sind der Kürze halber hier ausgeblendet.
Ergebnis
Scrollen Sie, um das Element zu sehen, das animiert wird. Dann schalten Sie das Kontrollkästchen am Ende des Textblocks um und scrollen Sie erneut. Beachten Sie, wie das Element seine Animation beendet, wenn es 75% des Weges durch den Viewport erreicht hat, und wie es zu seinem Standardzustand zurückkehrt, wenn die animation-fill-mode Eigenschaft nicht angewandt wird.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # animation-range-end |