timeline-trigger-source CSS property

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die CSS-Eigenschaft timeline-trigger-source legt die Timeline fest, die eine scroll-ausgelöste Animation auslöst.

Syntax

css

/* Keywords */
timeline-trigger-source: none;
timeline-trigger-source: auto;

/* Named timeline */
timeline-trigger-source: --my-timeline;

/* Anonymous scroll progress timeline */
timeline-trigger-source: scroll();
timeline-trigger-source: scroll(x root);

/* Anonymous view progress timeline */
timeline-trigger-source: view();
timeline-trigger-source: view(inline);
timeline-trigger-source: view(x 200px auto);

/* Multiple source values */
timeline-trigger-source: view(), none, --my-timeline;
timeline-trigger-source: scroll(x), auto, scroll(y root);

/* Global values */
timeline-trigger-source: inherit;
timeline-trigger-source: initial;
timeline-trigger-source: revert;
timeline-trigger-source: revert-layer;
timeline-trigger-source: unset;

Werte

Diese Eigenschaft wird als kommagetrennte Liste der folgenden Werte angegeben:

none: Der Trigger des Elements hat keine Quelle: Er ist keiner Timeline zugeordnet, und die Animation findet nicht statt.
auto: Die Trigger-Quelle des Elements ist die standardmäßige zeitbasierte DocumentTimeline des Dokuments. Dies ist der Standardwert.
<dashed-ident>: Das Element erstellt einen Trigger für eine scroll-ausgelöste Animation als benannte View-Progress-Timeline.
scroll(): Das Element erstellt einen Trigger für eine scroll-ausgelöste Animation als anonyme Scroll-Progress-Timeline.
view(): Das Element erstellt einen Trigger für eine scroll-ausgelöste Animation als anonyme View-Progress-Timeline.

Beschreibung

Die Eigenschaft timeline-trigger-source legt die Timeline fest, deren Trigger eine scroll-ausgelöste Animation steuert.

Zum Beispiel:

css

.trigger {
  timeline-trigger-name: --my-trigger;
  timeline-trigger-source: view();
}

Die resultierende ViewTimeline verfolgt die Position des Elements .trigger entlang der Blockachse des nächstgelegenen scrollenden Vorfahren. Der Trigger wird aktiviert und deaktiviert, wenn das verfolgte Element an bestimmte Positionen innerhalb des Scrollports gescrollt wird. Wenn timeline-trigger-source auf view() gesetzt ist, erfolgt die Aktivierung standardmäßig, sobald das verfolgte Element beginnt, in den Scrollport einzutreten. Die Deaktivierung erfolgt, sobald es den Scrollport vollständig verlassen hat.

Ein animiertes Element kann durch den zuvor beschriebenen Trigger ausgelöst werden, indem es dessen timeline-trigger-name in seiner Eigenschaft animation-trigger referenziert. Der Wert von animation-trigger besteht aus einer kommagetrennten Liste. Jeder Eintrag enthält den Namen eines Triggers und ein oder zwei <animation-action>-Schlüsselwörter, die festlegen, was die Animation bei der Aktivierung und Deaktivierung des Triggers tun soll.

Zum Beispiel:

css

.animated {
  animation: rotate 3s infinite linear both;
  animation-trigger: --my-trigger play-once;
}

Das animierte Element und das Element, das den Trigger erstellt, können dasselbe Element sein. In diesem Fall erstellt das animierte Element seinen eigenen Trigger:

css

.animatedAndTrigger {
  animation: rotate 3s infinite linear both;
  animation-trigger: --my-trigger play-once;

  timeline-trigger-name: --my-trigger;
  timeline-trigger-source: view();
}

Die Eigenschaft timeline-trigger-source kann zusammen mit den Eigenschaften timeline-trigger-name, timeline-trigger-activation-range und timeline-trigger-active-range auch über die Kurzschreibweise timeline-trigger festgelegt werden.

Arten von Trigger-Quellen

Um eine ausgelöste Animation zu erstellen, setzen Sie die Eigenschaft timeline-trigger-source auf einen von drei grundlegenden Werttypen:

Eine view()-Funktion, die einen Trigger in Form einer anonymen View-Progress-Timeline referenziert. Diese Timeline wird am nächstgelegenen scrollenden Vorfahren des Elements erstellt, das den Trigger erstellt. Wie bereits gezeigt, können Sie damit erreichen, dass ein Element zu animieren beginnt, wenn es selbst oder ein anderes Element einen bestimmten Scroll-Offset im Scrollport erreicht. Die Animation kann anhalten oder eine andere Aktion ausführen, wenn es selbst oder das andere Element einen anderen Scroll-Offset erreicht. Zum Beispiel:
css
```
timeline-trigger-name: --t;
timeline-trigger-source: view();
```
Eine scroll()-Funktion, die einen Trigger in Form einer anonymen Scroll-Progress-Timeline referenziert. Sie können diese Timeline am Wurzelelement oder am nächstgelegenen scrollenden Vorfahren des Elements erstellen, das den Trigger erstellt. Damit können Sie erreichen, dass ein Element zu animieren beginnt, wenn es selbst oder ein anderes Element einen absoluten Scroll-Offset erreicht (beispielsweise um 600px nach oben gescrollt wird). Die Animation kann anhalten oder eine andere Aktion ausführen, wenn es selbst oder das andere Element einen anderen Offset erreicht. Zum Beispiel:
css
```
timeline-trigger-name: --t;
timeline-trigger-source: scroll();
timeline-trigger-activation-range: 600px;
```
Hinweis: Sehen Sie sich das Beispiel für timeline-trigger-source mit scroll() an.
Ein <dashed-ident>, das eine benannte View-Progress-Timeline oder eine benannte Scroll-Progress-Timeline referenziert. Dazu setzen Sie view-timeline-name oder scroll-timeline-name auf dem Element, das den Trigger erstellt, und verwenden diesen Namen anschließend als Wert der Eigenschaft timeline-trigger-source. Zum Beispiel:
css
```
view-timeline-name: --my-timeline;
timeline-trigger-source: --my-timeline;
```

Scroll-Progress-Timelines sind für scroll-ausgelöste Animationen möglicherweise weniger nützlich als View-Progress-Timelines. Meist soll eine Animation bei einem Scroll-Offset relativ zum Scrollport beginnen und nicht erst nach einer beliebigen Scrollstrecke. Auf kleineren Bildschirmen könnte die Animation sonst außerhalb des sichtbaren Bereichs ausgelöst werden.

Weitere Werte

Sie können timeline-trigger-source auch auf das Schlüsselwort auto oder none setzen. Bei beiden entsteht keine scroll-ausgelöste Animation, ihre Auswirkungen unterscheiden sich jedoch.

Der Standardwert auto setzt die Trigger-Quelle des Elements auf die standardmäßige zeitbasierte DocumentTimeline des Dokuments. Dadurch werden auf das Element angewendete Animationen beim Laden der Seite abgespielt.
Mit dem Wert none hat der Trigger des Elements keine Quelle. Das bedeutet, dass auf das Element angewendete Animationen überhaupt nicht abgespielt werden.

Mehrere Quellen

Wenn Sie für eine einzelne Eigenschaft timeline-trigger-source mehrere kommagetrennte Werte angeben, werden diese den Timeline-Triggern in der Reihenfolge zugeordnet, in der die timeline-trigger-name-Werte erscheinen. Wenn die Anzahl der Trigger und der Werte von timeline-trigger-source nicht übereinstimmt, erfolgt die Zuordnung wie bei mehreren Werten für Animationseigenschaften.

Wenn beispielsweise mehrere timeline-trigger-name-Werte, aber nur ein timeline-trigger-source-Wert festgelegt sind, gilt dieser Wert für alle timeline-trigger-name-Werte. Sind zwei timeline-trigger-source-Werte festgelegt, werden sie der Reihe nach wiederholt, bis jedem timeline-trigger-name ein timeline-trigger-source-Wert zugeordnet ist. Entsprechend gilt dies auch für andere Anzahlen von Werten.

Betrachten Sie diese Deklarationen:

css

timeline-trigger-name: --my-trigger, --my-other-trigger, --another-trigger;
timeline-trigger-source: view(), --my-source;

In diesem Fall verwendet der erste Name die Quelle view() und der zweite die Quelle --my-source. Beim dritten Namen beginnt die Zuordnung erneut mit der Quelle view().

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	A list, with each item being either the keyword `none`, the keyword `auto`, a case-sensitive `<ident>`, a computed `scroll()` function, or a computed `view()` function.
Animationstyp	Not animatable

Formale Syntax

timeline-trigger-source = 
  [ none | auto | [ <dashed-ident> | <scroll()> | <view()> ]+ ]#  

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )  

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Grundlegende Verwendung einer View-Progress-Timeline als Quelle

In diesem Beispiel erstellen wir eine einfache scroll-ausgelöste Animation, die einen Trigger in Form einer anonymen View-Progress-Timeline verwendet.

HTML

Das Markup enthält zwei <div>-Elemente: eines, das animiert wird, und eines, das einen Trigger erstellt. Hinzu kommt Textinhalt, damit die Seite gescrollt werden kann. Der Text ist der Kürze halber ausgeblendet.

html

<div class="animated">I am animated</div>

...

<div class="trigger">I create the trigger</div>

...

<div class="animated">I am animated</div>

<p>
  Fusce dictum ex quis ipsum consectetur placerat. Cras sed lectus ex. Quisque
  purus dolor, vulputate ac mi eget, commodo varius odio. Suspendisse faucibus
  ipsum vel libero finibus, in placerat nibh congue. Sed iaculis, metus et
  euismod posuere, mi diam vestibulum felis, ac vulputate eros ipsum id justo.
  Etiam a tincidunt purus. Maecenas semper sed enim at blandit. Aenean ut
  sagittis lorem, eget gravida purus. Phasellus eleifend, lectus nec pulvinar
  facilisis, dui dolor feugiat odio, iaculis tempor felis est non tortor. In
  suscipit lorem efficitur molestie tempus. Integer sit amet neque et risus
  iaculis sodales sed eget diam. Quisque sodales nunc sapien, vitae lacinia ex
  luctus quis. Maecenas scelerisque scelerisque elit eu consequat. Etiam ac
  tristique tellus, sed tincidunt velit.
</p>

<p>
  Fusce dictum ex quis ipsum consectetur placerat. Cras sed lectus ex. Quisque
  purus dolor, vulputate ac mi eget, commodo varius odio. Suspendisse faucibus
  ipsum vel libero finibus, in placerat nibh congue. Sed iaculis, metus et
  euismod posuere, mi diam vestibulum felis, ac vulputate eros ipsum id justo.
  Etiam a tincidunt purus. Maecenas semper sed enim at blandit. Aenean ut
  sagittis lorem, eget gravida purus. Phasellus eleifend, lectus nec pulvinar
  facilisis, dui dolor feugiat odio, iaculis tempor felis est non tortor. In
  suscipit lorem efficitur molestie tempus. Integer sit amet neque et risus
  iaculis sodales sed eget diam. Quisque sodales nunc sapien, vitae lacinia ex
  luctus quis. Maecenas scelerisque scelerisque elit eu consequat. Etiam ac
  tristique tellus, sed tincidunt velit.
</p>

<div class="trigger">I create the trigger</div>

<p>
  Fusce dictum ex quis ipsum consectetur placerat. Cras sed lectus ex. Quisque
  purus dolor, vulputate ac mi eget, commodo varius odio. Suspendisse faucibus
  ipsum vel libero finibus, in placerat nibh congue. Sed iaculis, metus et
  euismod posuere, mi diam vestibulum felis, ac vulputate eros ipsum id justo.
  Etiam a tincidunt purus. Maecenas semper sed enim at blandit. Aenean ut
  sagittis lorem, eget gravida purus. Phasellus eleifend, lectus nec pulvinar
  facilisis, dui dolor feugiat odio, iaculis tempor felis est non tortor. In
  suscipit lorem efficitur molestie tempus. Integer sit amet neque et risus
  iaculis sodales sed eget diam. Quisque sodales nunc sapien, vitae lacinia ex
  luctus quis. Maecenas scelerisque scelerisque elit eu consequat. Etiam ac
  tristique tellus, sed tincidunt velit.
</p>

<p>
  Fusce dictum ex quis ipsum consectetur placerat. Cras sed lectus ex. Quisque
  purus dolor, vulputate ac mi eget, commodo varius odio. Suspendisse faucibus
  ipsum vel libero finibus, in placerat nibh congue. Sed iaculis, metus et
  euismod posuere, mi diam vestibulum felis, ac vulputate eros ipsum id justo.
  Etiam a tincidunt purus. Maecenas semper sed enim at blandit. Aenean ut
  sagittis lorem, eget gravida purus. Phasellus eleifend, lectus nec pulvinar
  facilisis, dui dolor feugiat odio, iaculis tempor felis est non tortor. In
  suscipit lorem efficitur molestie tempus. Integer sit amet neque et risus
  iaculis sodales sed eget diam. Quisque sodales nunc sapien, vitae lacinia ex
  luctus quis. Maecenas scelerisque scelerisque elit eu consequat. Etiam ac
  tristique tellus, sed tincidunt velit.
</p>

CSS

Die Eigenschaft position des animierten <div>-Elements wird auf fixed gesetzt. Dadurch befindet es sich nahe der oberen linken Ecke des Scrollports, sodass wir sehen können, wann seine Animation beginnt und endet.

body {
  width: 80%;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

css

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

Als Nächstes definieren wir die @keyframes für die Animation rotate, die wir später verwenden:

css

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

Über die Kurzschreibweise animation wird die Animation rotate auf das Element .animated angewendet. Ohne einen zugehörigen Trigger würde das Element beim Laden der Seite zu animieren beginnen. Die Eigenschaft animation-trigger macht daraus eine ausgelöste Animation. Ihr Wert referenziert einen timeline-trigger-name mit dem Wert --t und gibt zwei <animation-action>-Werte an – play und pause. Diese legen fest, dass die Animation bei der Aktivierung abgespielt und bei der Deaktivierung pausiert wird.

css

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}

Das Element .trigger erstellt den Trigger für das animierte <div> mithilfe der folgenden Eigenschaften:

timeline-trigger-name mit dem Wert --t. Dieser entspricht dem Bezeichner, den der Wert der Eigenschaft animation-trigger des Elements .animated referenziert, und verknüpft so die beiden Elemente.
timeline-trigger-source mit dem Wert view(). Dadurch wird eine View-Progress-Timeline als Trigger festgelegt, wobei der nächstgelegene scrollende Vorfahr des Elements die Timeline bereitstellt.

css

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
}

Ergebnis

Scrollen Sie den Inhalt nach oben. Sobald ein Teil von .trigger im Scrollport erscheint, wird die Animation abgespielt. Wenn .trigger den Scrollport an einer der beiden Kanten vollständig verlassen hat, wird die Animation pausiert.

Grundlegende Verwendung einer Scroll-Progress-Timeline als Quelle

Dieses Beispiel ist nahezu identisch mit dem vorherigen. Diesmal setzen wir timeline-trigger-source jedoch auf eine anonyme Scroll-Progress-Timeline statt auf eine anonyme View-Progress-Timeline.

HTML und CSS sind nahezu identisch. Allerdings haben wir timeline-trigger-source für das Element .trigger diesmal auf scroll() statt auf view() gesetzt. Dadurch wird am nächstgelegenen scrollenden Vorfahren des Elements ein Trigger in Form einer anonymen Scroll-Progress-Timeline erstellt.

Außerdem haben wir timeline-trigger-activation-range auf 600px gesetzt. Das bedeutet, dass der Trigger aktiviert wird – und die Animation zu spielen beginnt –, wenn das verfolgte Element um 600px nach oben gescrollt wird. Ohne diese Angabe würde der Trigger sofort beim Laden der Seite aktiviert.

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}

css

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: scroll();
  timeline-trigger-activation-range: 600px;
}

@supports not (timeline-trigger-source: scroll()) {
  body::before {
    content: "Your browser does not support the timeline-trigger-source property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Ergebnis

Die Animation beginnt, wenn das verfolgte Element um 600px nach oben gescrollt wird.

Spezifikationen

Spezifikation
Animation Triggers # propdef-timeline-trigger-source

Browser-Kompatibilität

Siehe auch

timeline-trigger-name, timeline-trigger-activation-range und timeline-trigger-active-range
Kurzschreibweise timeline-trigger
animation-trigger
Typ <animation-action>
trigger-scope
CSS-Animationen verwenden, die durch Scrollen ausgelöst werden
Modul CSS-Animationstrigger
Modul CSS-Animationen

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