---
title: "Zeitleiste, Zustände und Animation"
description: "Leg fest, wann Objekte erscheinen, gib Objekten mit Zuständen verschiedene Darstellungen und füg Eingangs-, Ausgangs-, Hervorhebungs- und Pfadanimationen hinzu."
canonical_url: "https://docs.ols.yonn.online/de/build/timeline-and-animation"
---
# Zeitleiste, Zustände und Animation

> Leg fest, wann Objekte erscheinen, gib Objekten mit Zuständen verschiedene Darstellungen und füg Eingangs-, Ausgangs-, Hervorhebungs- und Pfadanimationen hinzu.

Eine Folie ist kein Standbild: Sie läuft ein paar Sekunden, und Objekte können nacheinander erscheinen, sich bewegen oder ihr Aussehen ändern. Drei Werkzeuge steuern das:

- **Zeitleiste**: wann jedes Objekt erscheint und verschwindet.
- **Zustände**: andere Darstellungen desselben Objekts, zum Beispiel wenn die Maus über einer Schaltfläche ist.
- **Animationen**: wie ein Objekt hereinkommt, hinausgeht, Aufmerksamkeit weckt oder sich auf einem Pfad bewegt.

![Eine ausgewählte Schaltfläche mit ihren Zuständen Normal, Hover, Gedrückt und Deaktiviert rechts und der Zeitleiste der Folie unten](https://docs.ols.yonn.online/screenshots/de/timeline-and-animation-states.png)

## Einen Text nach 2 Sekunden einblenden, in 3 Schritten

<procedure>

### Objekt auswählen

Klick den Text auf der Folie an. Seine Zeile in der Zeitleiste unten wird hervorgehoben.

### Balken verschieben

Zieh den grauen Balken in der Zeitleiste nach rechts, bis er bei 2 s beginnt. Oder öffne rechts den Tab **Animation** und trag unter **Startzeit** 2 ein.

### Eingang hinzufügen

Klick im Menüband-Tab **Animationen** auf den Knopf unter **Eingang** und wähl zum Beispiel **Einblenden**. Klick in der Zeitleiste auf **Abspielen**, um es anzusehen.

</procedure>

## Die Zeitleiste

Jede Folie und jede Ebene hat ihre eigene Zeitleiste. Jede Zeile ist ein Objekt; der Balken zeigt, wann es sichtbar ist.

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      Was es macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Abspielen
      </strong>
      
       und <strong>
        Zum Anfang
      </strong>
    </td>
    
    <td>
      Spielen die Folie im Editor ab oder springen zurück auf 0 Sekunden.
    </td>
  </tr>
  
  <tr>
    <td>
      Zeitanzeige
    </td>
    
    <td>
      Aktuelle Zeit und Gesamtlänge, zum Beispiel 0,00 s / 5,00 s.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Cue-Punkt
      </strong>
    </td>
    
    <td>
      Setzt eine Markierung an der aktuellen Zeit. Du kannst ihn verschieben und umbenennen. Trigger reagieren darauf mit dem Ereignis <strong>
        Zeitleiste erreicht
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Balken eines Objekts
    </td>
    
    <td>
      Ziehen verschiebt ihn zeitlich. Am linken oder rechten Rand ziehen ändert Start oder Ende.
    </td>
  </tr>
  
  <tr>
    <td>
      Ende der Zeitleiste
    </td>
    
    <td>
      Ziehen macht die Folie länger oder kürzer. <strong>
        Dauer einpassen
      </strong>
      
       passt die Zeitachse ans Fenster an.
    </td>
  </tr>
  
  <tr>
    <td>
      Zoom-Knöpfe
    </td>
    
    <td>
      Machen die Zeitachse größer oder kleiner. Das geht auch mit gedrückter <key-combo keys="Strg">
        
      </key-combo>
      
       und Scrollen.
    </td>
  </tr>
  
  <tr>
    <td>
      Reihenfolge der Zeilen
    </td>
    
    <td>
      Oben liegt vorne. Zieh eine Zeile am Namen nach oben oder unten, oder auf eine andere Ebene. Am Tablet hältst du die Zeile kurz gedrückt und ziehst dann.
    </td>
  </tr>
  
  <tr>
    <td>
      Auge
    </td>
    
    <td>
      Blendet das Objekt beim Arbeiten im Editor aus.
    </td>
  </tr>
  
  <tr>
    <td>
      Schloss
    </td>
    
    <td>
      Sperrt das Objekt, damit es nicht verrutscht.
    </td>
  </tr>
</tbody>
</table>

<hint-box kind="tip" title="Warum sind manche Objekte blass?">

Zum aktuellen Zeitpunkt der Zeitleiste sind diese Objekte noch nicht (oder nicht mehr) sichtbar. Der Editor zeigt sie verblasst, damit du trotzdem daran arbeiten kannst. Schalte **Zeitleistenposition berücksichtigen** in der Leiste unter der Folie aus, um alles in voller Stärke zu sehen.

</hint-box>

## Zeitpunkt im Tab Animation

<table>
<thead>
  <tr>
    <th>
      Einstellung
    </th>
    
    <th>
      Was sie macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Startzeit
      </strong>
      
       und <strong>
        Endzeit
      </strong>
    </td>
    
    <td>
      Wie das Ziehen am Balken, nur in genauen Sekunden.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Bis Folienende anzeigen
      </strong>
    </td>
    
    <td>
      Das Objekt bleibt bis zum Ende der Folie sichtbar.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Immer anzeigen
      </strong>
    </td>
    
    <td>
      Das Objekt bleibt sichtbar, auch wenn du die Folie später verlängerst.
    </td>
  </tr>
</tbody>
</table>

## Zustände

Ein **Zustand** ist eine andere Darstellung desselben Objekts. Zwischen den eingebauten Zuständen wechselt der Player von selbst.

<table>
<thead>
  <tr>
    <th>
      Zustand
    </th>
    
    <th>
      Wann Lernende ihn sehen
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Normal
      </strong>
    </td>
    
    <td>
      Das übliche Aussehen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Hover
      </strong>
    </td>
    
    <td>
      Solange die Maus über dem Objekt ist.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Gedrückt
      </strong>
    </td>
    
    <td>
      Während das Objekt angeklickt wird.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Ausgewählt
      </strong>
    </td>
    
    <td>
      Nach einem Klick auf ein auswählbares Objekt, zum Beispiel in einer Schaltflächengruppe.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Besucht
      </strong>
    </td>
    
    <td>
      Nachdem das Objekt einmal angeklickt wurde.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Deaktiviert
      </strong>
    </td>
    
    <td>
      Das Objekt lässt sich nicht anklicken.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Ausgeblendet
      </strong>
    </td>
    
    <td>
      Das Objekt ist unsichtbar.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Ziehen über
      </strong>
      
      , <strong>
        Ablage richtig
      </strong>
      
      , <strong>
        Ablage falsch
      </strong>
    </td>
    
    <td>
      Bei Drag-and-Drop-Aufgaben.
    </td>
  </tr>
</tbody>
</table>

<procedure>

### Tab Zustände öffnen

Wähl das Objekt aus und öffne rechts den Tab **Zustände**. Hat es nur **Normal**, klick auf **Hover hinzufügen** oder **Ausgewählt hinzufügen**, oder nutz **Neu** für jeden anderen Zustand.

### Zustand wählen und ändern

Klick den Zustand in der Liste an. Der Editor zeigt jetzt an, welchen Zustand du bearbeitest. Ändere Farben, Text oder Bild im Tab **Format**. Gespeichert wird nur, was sich von Normal unterscheidet.

### Fertig

Klick auf **Fertig** oder **Zurück zu Normal**. Die Liste zeigt, wie viele Abweichungen jeder Zustand hat.

</procedure>

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      Was es macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Neu
      </strong>
    </td>
    
    <td>
      Fügt einen eingebauten Zustand hinzu oder einen <strong>
        Eigener Zustand...
      </strong>
      
       mit beliebigem Namen. Zu eigenen Zuständen wechselst du mit der Trigger-Aktion <strong>
        Zustand ändern
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Menü eines Zustands
    </td>
    
    <td>
      Zustand umbenennen, duplizieren oder löschen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Initialzustand
      </strong>
    </td>
    
    <td>
      Der Zustand beim Laden der Folie, zum Beispiel <strong>
        Deaktiviert
      </strong>
      
       für eine Schaltfläche, die erst später funktionieren soll.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Stil zurücksetzen
      </strong>
    </td>
    
    <td>
      Entfernt die eigenen Farben dieses Zustands, sodass er wieder wie Normal aussieht.
    </td>
  </tr>
</tbody>
</table>

## Eingang und Ausgang

Wähl ein oder mehrere Objekte aus und nutz den Menüband-Tab **Animationen** oder rechts den Tab **Animation**.

<table>
<thead>
  <tr>
    <th>
      Einstellung
    </th>
    
    <th>
      Was sie macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Eingangsanimation
      </strong>
    </td>
    
    <td>
      Wie das Objekt erscheint: <strong>
        Einblenden
      </strong>
      
      , <strong>
        Hereinfliegen
      </strong>
      
      , <strong>
        Schweben
      </strong>
      
      , <strong>
        Wachsen
      </strong>
      
      , <strong>
        Schrumpfen
      </strong>
      
      , <strong>
        Zoomen
      </strong>
      
      , <strong>
        Drehen
      </strong>
      
      , <strong>
        Wischen
      </strong>
      
      , <strong>
        Teilen
      </strong>
      
      , <strong>
        Springen
      </strong>
      
      , <strong>
        Schwenken
      </strong>
      
      , <strong>
        Drehen und wachsen
      </strong>
      
      , <strong>
        Wachsen und drehen
      </strong>
      
      , <strong>
        Zufällige Balken
      </strong>
      
      , <strong>
        Form
      </strong>
      
       oder <strong>
        Kreis
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Ausgangsanimation
      </strong>
    </td>
    
    <td>
      Wie es verschwindet, zum Beispiel <strong>
        Ausblenden
      </strong>
      
      , <strong>
        Hinausfliegen
      </strong>
      
      , <strong>
        Vergrößern
      </strong>
      
       oder <strong>
        Verkleinern
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Richtung
      </strong>
    </td>
    
    <td>
      Woher es kommt oder wohin es geht, zum Beispiel <strong>
        Von links
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Dauer
    </td>
    
    <td>
      Wie lange die Animation dauert.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Beschleunigung
      </strong>
    </td>
    
    <td>
      Wie sich das Tempo ändert: <strong>
        Linear
      </strong>
      
      , <strong>
        Beschleunigen
      </strong>
      
      , <strong>
        Abbremsen
      </strong>
      
      , <strong>
        Weich
      </strong>
      
      , <strong>
        Zurückfedern
      </strong>
      
      , <strong>
        Elastisch
      </strong>
      
       oder <strong>
        Abprallen
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Textfolge
      </strong>
    </td>
    
    <td>
      Bei Text: <strong>
        Als ein Objekt
      </strong>
      
      , <strong>
        Nach Absatz
      </strong>
      
       oder <strong>
        Nach Wort
      </strong>
      
      .
    </td>
  </tr>
</tbody>
</table>

## Hervorhebung

Eine **Hervorhebung** lenkt den Blick auf ein Objekt, das schon sichtbar ist. Du findest sie rechts im Tab **Animation**.

<table>
<thead>
  <tr>
    <th>
      Einstellung
    </th>
    
    <th>
      Was sie macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Effekt
    </td>
    
    <td>
      <strong>
        Pulsieren
      </strong>
      
      , <strong>
        Wackeln
      </strong>
      
      , <strong>
        Drehen
      </strong>
      
      , <strong>
        Wachsen
      </strong>
      
      , <strong>
        Blinken
      </strong>
      
       oder <strong>
        Welle
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Wiederholen
      </strong>
    </td>
    
    <td>
      Wie oft sie nacheinander abläuft.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Beim Start der Zeitleiste abspielen
      </strong>
    </td>
    
    <td>
      An: läuft von selbst. Aus: Du spielst sie mit der Trigger-Aktion <strong>
        Hervorhebung abspielen
      </strong>
      
       ab, zum Beispiel wenn Lernende eine Weile nicht klicken.
    </td>
  </tr>
</tbody>
</table>

## Bewegungspfade

Ein Bewegungspfad schiebt ein Objekt entlang einer Linie, zum Beispiel ein Auto über die Straße.

<procedure>

### Pfad hinzufügen

Wähl ein einzelnes Objekt aus und klick auf <ui-path path="Animationen > Pfad hinzufügen">



</ui-path>

. Wähl eine Vorlage: **Linie nach rechts**, **Linie nach links**, **Linie nach oben**, **Linie nach unten**, **Diagonale**, **Bogen**, **Kreis**, **Zickzack** oder **Benutzerdefiniert**.

### Pfad formen

Zieh die Pfadpunkte auf der Folie. Klick zwischen zwei Punkte, um einen hinzuzufügen, Doppelklick auf einen Punkt entfernt ihn.

### Details einstellen

Wähl im Tab **Animation** Dauer, Beschleunigung und die Optionen unten.

### Start festlegen

Schalte **Automatisch starten** ein und setz eine **Startzeit**. Oder lass es aus und starte den Pfad mit der Trigger-Aktion **Bewegungspfad starten**.

</procedure>

<table>
<thead>
  <tr>
    <th>
      Einstellung
    </th>
    
    <th>
      Was sie macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Geglättet
      </strong>
    </td>
    
    <td>
      Rundet die Ecken des Pfads zu Kurven.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Geschlossen
      </strong>
    </td>
    
    <td>
      Der Pfad kehrt zu seinem Anfang zurück, zum Beispiel bei einem Kreis.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Relativer Start
      </strong>
    </td>
    
    <td>
      Der Pfad beginnt dort, wo das Objekt gerade steht.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Am Pfad ausrichten
      </strong>
    </td>
    
    <td>
      Das Objekt dreht sich in Bewegungsrichtung.
    </td>
  </tr>
</tbody>
</table>

## Folien- und Ebenenübergänge

Unter **Folienübergang** im Tab **Animationen** wählst du, wie die Folie erscheint: **Keiner**, **Überblenden**, **Schieben**, **Überdecken**, **Zoomen** oder **Auflösen**, mit Richtung und Dauer. Wähl in der Leiste über der Folie eine Ebene, um stattdessen deren Übergang einzustellen. **Auf alle** überträgt ihn auf alle Folien (oder alle Ebenen der Folie).

## Wenn etwas nicht klappt

<table>
<thead>
  <tr>
    <th>
      Problem
    </th>
    
    <th>
      Was du tun kannst
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Ein Objekt erscheint in der Vorschau nie
    </td>
    
    <td>
      Sein Balken beginnt nach dem Ende der Folie, oder es steht auf <strong>
        Anfangs ausgeblendet
      </strong>
      
      . Prüf die Zeitleiste und den Abschnitt <strong>
        Barrierefreiheit
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Die Animation spielt nicht
    </td>
    
    <td>
      Spiel die Folie in der Vorschau ab. Im Editor nutzt du <strong>
        Abspielen
      </strong>
      
       in der Zeitleiste.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Pfad hinzufügen
      </strong>
      
       geht nicht oder zeigt einen Hinweis
    </td>
    
    <td>
      Bewegungspfade bearbeitest du für ein einzelnes Objekt. Wähl nur ein Objekt aus.
    </td>
  </tr>
  
  <tr>
    <td>
      Mein Hover-Aussehen zeigt sich nicht
    </td>
    
    <td>
      Das Objekt hat noch keinen Zustand <strong>
        Hover
      </strong>
      
      . Füg ihn im Tab <strong>
        Zustände
      </strong>
      
       hinzu.
    </td>
  </tr>
  
  <tr>
    <td>
      Die Folie ist zu kurz für meine Animation
    </td>
    
    <td>
      Zieh das Ende der Zeitleiste nach rechts oder erhöh die <strong>
        Dauer
      </strong>
      
       der Folie.
    </td>
  </tr>
</tbody>
</table>


## Sitemap

See the full [sitemap](https://docs.ols.yonn.online/sitemap.md) for all pages.