Signatur
Beschreibung
Mit updateTiming() lassen sich die Zeiteigenschaften eines AnimationEffect (meist ein KeyframeEffect) nachträglich ändern, ohne die Animation neu zu erzeugen. Übergeben wird ein Objekt, das nur die Eigenschaften enthält, die sich ändern sollen. Alle anderen Werte bleiben wie sie sind.
Das ist praktisch, wenn Nutzer die Geschwindigkeit, die Anzahl der Wiederholungen oder die Richtung einer Animation zur Laufzeit anpassen sollen, zum Beispiel über Schieberegler in einem Animations-Editor oder wenn prefers-reduced-motion sich ändert. Die Änderung wirkt sofort. Die aktuelle Position der Animation (currentTime) bleibt dabei erhalten, deshalb kann ein Effekt nach einer Änderung von duration sichtbar „springen“.
Welche Werte gerade gelten, liest du mit getTiming() aus. Berechnete Werte wie Fortschritt oder aktuelle Iteration liefert getComputedTiming().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $timing | OptionalEffectTiming | {} | Objekt mit den Zeiteigenschaften, die geändert werden sollen. Erlaubt sind: delay (ms), endDelay (ms), fill ("none", "forwards", "backwards", "both", "auto"), iterationStart, iterations (Zahl oder Infinity), duration (ms oder "auto"), direction ("normal", "reverse", "alternate", "alternate-reverse") und easing (CSS-Easing-String). |
Beispiele
Dauer einer laufenden Animation ändern
const box = document.querySelector('.box');
const animation = box.animate(
[{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
{ duration: 2000, iterations: Infinity }
);
// Nach 3 Sekunden doppelt so schnell drehen
setTimeout(() => {
animation.effect.updateTiming({ duration: 1000 });
console.log(animation.effect.getTiming().duration);
}, 3000);Geschwindigkeit über einen Schieberegler steuern
const slider = document.querySelector('#speed'); // <input type="range" min="200" max="3000">
const ball = document.querySelector('.ball');
const bounce = ball.animate(
[{ transform: 'translateY(0)' }, { transform: 'translateY(-150px)' }],
{ duration: Number(slider.value), direction: 'alternate', iterations: Infinity, easing: 'ease-in-out' }
);
slider.addEventListener('input', () => {
bounce.effect.updateTiming({ duration: Number(slider.value) });
});Bewegung bei reduzierter Bewegungspräferenz abschwächen
const media = window.matchMedia('(prefers-reduced-motion: reduce)');
const banner = document.querySelector('.banner');
const pulse = banner.animate(
[{ opacity: 1 }, { opacity: 0.4 }],
{ duration: 800, direction: 'alternate', iterations: Infinity }
);
const applyPreference = () => {
pulse.effect.updateTiming(
media.matches
? { iterations: 1, fill: 'forwards' }
: { iterations: Infinity, fill: 'none' }
);
console.log(pulse.effect.getTiming().iterations);
};
applyPreference();
media.addEventListener('change', applyPreference);// Wichtig · Fallstricke
- Ungültige Werte: Negative
duration, negative oderNaN-Werte beiiterationsoder ein ungültigereasing-String lösen einenTypeErroraus. In diesem Fall wird keine der übergebenen Eigenschaften übernommen. - Sprünge:
currentTimebleibt gleich, auch wenn sichdurationoderdelayändern. Deshalb kann der sichtbare Fortschritt springen. Wenn der relative Fortschritt erhalten bleiben soll, istanimation.updatePlaybackRate()oft die bessere Wahl. - CSS-Animationen und CSS-Transitions: Bei
CSSAnimationüberschreibtupdateTiming()die Werte aus dem Stylesheet. Spätere Änderungen an den zugehörigen CSS-Eigenschaften (z. B.animation-duration) werden für diese Eigenschaften dann nicht mehr übernommen. - Browser-Kompatibilität: Wird von Chrome/Edge 75+, Firefox 63+ und Safari 13.1+ unterstützt. Ältere Implementierungen boten stattdessen ein veränderbares
effect.timing-Objekt an. Dieses ist veraltet und sollte nicht mehr verwendet werden.