# Template animieren: ein Video mit bewegten Elementen erstellen

> Stelle dein Template auf MP4 oder MOV um, animiere Eigenschaften mit Keyframes auf der Timeline und teste das Video im Design-Generator.

Source: https://bluepic.io/de/help/design-elements-and-tools/video-and-animation  
Language: de  
Category: design-elements-and-tools  
Last updated: 2026-10-22

Im Template-Editor animierst du Eigenschaften deiner Elemente, zum Beispiel Position, Größe oder Deckkraft. Aus dem Template wird so ein kurzes Video von höchstens 15 Sekunden, das Nutzer im Design-Generator als MP4 oder MOV exportieren. Bewegt werden deine eigenen Elemente: Texte, Bilder und Formen.

Das geht in drei Schritten:

1. Stelle das Template im Properties-Panel auf Video um.
2. Animiere eine Eigenschaft mit der Timeline.
3. Teste das Video im Design-Generator.


## Template auf Video umstellen

1. Klicke auf dem Canvas auf eine leere Stelle. Jetzt ist kein Element ausgewählt, und das Properties-Panel zeigt die Einstellungen des Templates.
2. Wähle unter **Format** **MP4** oder **MOV**. Das Template ist jetzt ein Video. Unter **Format** erscheinen **Duration (s)** und **FPS**, unten im Editor die Timeline.

3. Gib bei **Duration (s)** die Länge des Videos in Sekunden ein. Mehr als 15 Sekunden geht nicht: Ein größerer Wert wird auf 15 gekürzt.
4. Wähle bei **FPS**, wie viele Bilder pro Sekunde das Video hat: 12, 24, 25, 30, 50 oder 60. Mehr Bilder pro Sekunde machen Bewegungen flüssiger.

   ![Abschnitt Format mit MP4, Duration (s) und FPS.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-video-and-animation-01/public){width="343"}

## Eigenschaft animieren

Ein Keyframe legt fest, welchen Wert eine Eigenschaft zu einem bestimmten Zeitpunkt hat. Zwischen zwei Keyframes ändert sich der Wert nach und nach. So entsteht die Bewegung.

1. Klicke in der Toolbar auf das Werkzeug **Animate a property**, rechts neben **Create Input Field**. Das Werkzeug ist jetzt aktiv.

   ![Toolbar mit markiertem Werkzeug Animate a property.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-video-and-animation-03/public){width="673"}

2. Klicke auf dem Canvas oder im Layers-Panel auf das Element, das sich bewegen soll. Im Properties-Panel kannst du jetzt jede Eigenschaft mit einer Zahl animieren, zum Beispiel **X**, **Y** oder **Opacity**. Fährst du mit der Maus darüber, wird sie gestrichelt umrandet.

   ![Position & Size eines ausgewählten Textes bei aktivem Werkzeug Animate a property: Das Feld X zeigt den gestrichelten Rahmen einer animierbaren Eigenschaft und ist markiert.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-video-and-animation-04/public){width="894"}

3. Klicke im Properties-Panel auf die Eigenschaft, die du animieren willst. Die Eigenschaft ist jetzt animiert und hat einen ersten Keyframe bei 0 Sekunden mit ihrem bisherigen Wert. Die Timeline zeigt sie an, zum Beispiel als `text2 · x`.
4. Klicke in der Timeline rechts vom letzten Keyframe an die Stelle, an der der nächste Keyframe liegen soll. Ein neuer Keyframe erscheint dort und ist ausgewählt.

   > **Beim Klick in die Timeline erscheint kein Keyframe?** Ein neuer Keyframe entsteht nur rechts vom letzten Keyframe. Ein Klick weiter links hebt nur die Auswahl auf. Einen Keyframe zwischen zwei anderen setzt du mit einem Klick auf die Linie zwischen ihnen.

5. Gib oben in der Timeline bei **Time** den Zeitpunkt in Sekunden und bei **Value** den Wert der Eigenschaft ein. Das Element hat zu diesem Zeitpunkt jetzt genau diesen Wert.
6. Wähle oben rechts in der Timeline, wie sich der Wert bis zu diesem Keyframe ändert: **Linear** für einen gleichmäßigen Übergang, **Bezier** für einen geschwungenen Verlauf. Beim ersten Keyframe gibt es nur **Linear**.

   ![Timeline unten im Editor mit der animierten Eigenschaft text2 · x und ihren Keyframes.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-video-and-animation-02/public){width="900"}

7. Ziehe die senkrechte Zeitlinie in der Timeline von links nach rechts. Prüfe auf dem Canvas, ob sich das Element am Anfang, in der Mitte und am Ende so bewegt, wie du willst.

Einen Keyframe verschiebst du, indem du ihn in der Timeline ziehst. Zum Löschen wählst du ihn aus und klickst oben rechts auf den Papierkorb. Für jede weitere Eigenschaft beginnst du wieder bei Schritt 1. Welche animierte Eigenschaft die Timeline zeigt, wählst du oben links im Dropdown-Menü.

> **Tipp:** Mit Expressions kannst du auch selbst animieren: mit `ANIMATE`, `LINEAR` und `CUBIC` und dem Wert `TIME` für die aktuelle Zeit. Siehe [Übersicht der Expression-Funktionen](https://bluepic.io/de/help/expressions-and-logic/functions).

## Video im Design-Generator testen

Der Design-Generator ist die Seite, auf der Nutzer dein Template ausfüllen und exportieren. Hier siehst du das Video so, wie Nutzer es bekommen.

1. Klicke oben rechts auf **Share** und dann auf **Publish Template Link**. Dein Template ist jetzt über einen Link erreichbar.
2. Klicke auf **Copy URL** und öffne den Link in einem neuen Browser-Tab. Der Design-Generator öffnet sich. Unter dem Design siehst du einen Play-Button, die Zeit und einen Regler.

   <!-- SCREENSHOT NEEDED: KB-video-and-animation-05. Design-Generator with an animated MP4 template: the player bar below the design with play button, time readout (current / total) and slider; highlight the player bar. See docs/knowledge-base-screenshots.md. -->

3. Klicke auf den Play-Button. Prüfe die Bewegung auch mit anderen Werten in den Input-Feldern, zum Beispiel mit einem längeren Text.
4. Klicke oben rechts auf **Export**. Bluepic erstellt das Video, der Button zeigt, wie weit es ist. Der Export kostet 1 Credit, wie jeder Video-Export aus dem Design-Generator. Danach startet der Download, oder es öffnet sich ein Popup, in dem du **Download** wählst.
5. Schau dir das heruntergeladene Video an. Prüfe, ob es vollständig und flüssig ist.

Jedes Video kostet beim Export gleich viele Credits, egal wie lang es ist: im Design-Generator und im Batch Editor 1 Credit, über die API 0,1 Credits. Siehe [Credits: was Exporte kosten](https://bluepic.io/de/help/account-management/credits).

## Mehr dazu

- [Template erstellen: Größe und Export-Format festlegen](https://bluepic.io/de/help/template-management/template-setup-and-settings)
- [Aussehen, Effekte und Transformationen](https://bluepic.io/de/help/design-elements-and-tools/effects-and-transforms)
- [Übersicht der Expression-Funktionen](https://bluepic.io/de/help/expressions-and-logic/functions)
- [Template-Link veröffentlichen: Design-Generator teilen](https://bluepic.io/de/help/template-management/share-template-link)