AnimationTimeline: duration-Eigenschaft
Baseline 2026
Neu verfügbar
Seit Oktober 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 duration-Eigenschaft des Web Animations API's AnimationTimeline-Interfaces gibt den Höchstwert für diese Timeline oder null zurück.
Beachten Sie, dass die abgeleiteten Schnittstellen ViewTimeline und ScrollTimeline immer eine Dauer von 100 % zurückgeben, während DocumentTimeline keine Dauer hat und null zurückgibt.
Wert
Eine Zahl, die die Dauer der Timeline (den Höchstwert für diese Timeline) oder null darstellt.
Beispiele
View-Timeline-Dauer
Die ViewTimeline gibt immer eine Dauer von 100% als CSSUnitValue zurück.
const subject = document.querySelector(".subject");
const timeline = new ViewTimeline({
subject,
axis: "block",
});
timeline.duration; // CSSUnitValue { value: 100, unit: "percent" }
Scroll-Timeline-Dauer
Die ScrollTimeline gibt immer eine Dauer von 100% als CSSUnitValue zurück.
const timeline = new ScrollTimeline({
source: document.documentElement,
axis: "block",
});
timeline.duration; // CSSUnitValue { value: 100, unit: "percent" }
Dokument-Timeline-Dauer
Die DocumentTimeline hat keine Dauer.
document.timeline.duration; // null
Spezifikationen
| Spezifikation |
|---|
| Web Animations Module Level 2 # dom-animationtimeline-duration |
Browser-Kompatibilität
Siehe auch
- Web Animations API
AnimationTimelineDocumentTimelineerbt diese EigenschaftScrollTimelineerbt diese EigenschaftViewTimelineerbt diese Eigenschaft