CSS/Eigenschaften/animation-timeline

Die Eigenschaft animation-timeline legt die Zeitleiste fest, die zur Steuerung des Fortschritts einer CSS-Animation verwendet wird.

Erlaubte Werte

• none:
• auto:
• scroll()
• view()
• <dashed-ident>: Identifizieren einer benannten Zeitleiste, die zuvor mit der scroll-timeline oder view-timeline deklariert wurde.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

auto

anwendbar auf

alle Elemente, Pseudoelemente ::before und ::after

Vererbung

nein

animierbar

nein

Beispiel

#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --square-timeline;
  position: relative;
}

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-direction: alternate;
  animation-timeline: --square-timeline;

  position: absolute;
  bottom: 0;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

Siehe auch

• CSS/Tutorials/Animation/Animation#animation-timeline

Weblinks

• CSSWG: animation-timeline CSS Animations Level 2
• MDN: animation-timeline