[{"data":1,"prerenderedAt":419},["ShallowReactive",2],{"help-article-\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation":3},{"id":4,"title":5,"body":6,"category":394,"description":395,"extension":396,"keywords":397,"meta":409,"navigation":410,"order":411,"path":412,"published":413,"rawbody":414,"seo":415,"stem":416,"updated":417,"__hash__":418},"helpDe\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation.de.md","Template animieren: ein Video mit bewegten Elementen erstellen",{"type":7,"value":8,"toc":387},"minimark",[9,22,25,45,50,122,126,129,256,263,288,292,298,349,359],[10,11,12,13,17,18,21],"p",{},"Im ",[14,15,16],"place",{},"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 ",[14,19,20],{},"Design-Generator"," als MP4 oder MOV exportieren. Bewegt werden deine eigenen Elemente: Texte, Bilder und Formen.",[10,23,24],{},"Das geht in drei Schritten:",[26,27,28,36,39],"ol",{},[29,30,31,32,35],"li",{},"Stelle das Template im ",[14,33,34],{},"Properties-Panel"," auf Video um.",[29,37,38],{},"Animiere eine Eigenschaft mit der Timeline.",[29,40,41,42,44],{},"Teste das Video im ",[14,43,20],{},".",[46,47,49],"h2",{"id":48},"template-auf-video-umstellen","Template auf Video umstellen",[26,51,52,66,96,106],{},[29,53,54,58,59,62,63,65],{},[55,56,57],"click",{},"Klicke"," auf dem ",[14,60,61],{},"Canvas"," auf eine leere Stelle. Jetzt ist kein Element ausgewählt, und das ",[14,64,34],{}," zeigt die Einstellungen des Templates.",[29,67,68,71,72,76,77,80,81,84,85,87,88,91,92,95],{},[55,69,70],{},"Wähle"," unter ",[73,74,75],"strong",{},"Format"," ",[73,78,79],{},"MP4"," oder ",[73,82,83],{},"MOV",". Das Template ist jetzt ein Video. Unter ",[73,86,75],{}," erscheinen ",[73,89,90],{},"Duration (s)"," und ",[73,93,94],{},"FPS",", unten im Editor die Timeline.",[29,97,98,102,103,105],{},[99,100,101],"type",{},"Gib"," bei ",[73,104,90],{}," die Länge des Videos in Sekunden ein. Mehr als 15 Sekunden geht nicht: Ein größerer Wert wird auf 15 gekürzt.",[29,107,108,102,110,112,113,116],{},[55,109,70],{},[73,111,94],{},", wie viele Bilder pro Sekunde das Video hat: 12, 24, 25, 30, 50 oder 60. Mehr Bilder pro Sekunde machen Bewegungen flüssiger.",[114,115],"br",{},[117,118],"img",{"alt":119,"src":120,"width":121},"Abschnitt Format mit MP4, Duration (s) und FPS.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-01\u002Fpublic",343,[46,123,125],{"id":124},"eigenschaft-animieren","Eigenschaft animieren",[10,127,128],{},"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.",[26,130,131,155,187,199,211,224,246],{},[29,132,133,135,136,139,140,143,144,147,148,150],{},[55,134,57],{}," in der ",[14,137,138],{},"Toolbar"," auf das Werkzeug ",[73,141,142],{},"Animate a property",", rechts neben ",[73,145,146],{},"Create Input Field",". Das Werkzeug ist jetzt aktiv.",[114,149],{},[117,151],{"alt":152,"src":153,"width":154},"Toolbar mit markiertem Werkzeug Animate a property.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-03\u002Fpublic",673,[29,156,157,58,159,161,162,165,166,168,169,172,173,80,176,179,180,182],{},[55,158,57],{},[14,160,61],{}," oder im ",[14,163,164],{},"Layers-Panel"," auf das Element, das sich bewegen soll. Im ",[14,167,34],{}," kannst du jetzt jede Eigenschaft mit einer Zahl animieren, zum Beispiel ",[73,170,171],{},"X",", ",[73,174,175],{},"Y",[73,177,178],{},"Opacity",". Fährst du mit der Maus darüber, wird sie gestrichelt umrandet.",[114,181],{},[117,183],{"alt":184,"src":185,"width":186},"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:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-04\u002Fpublic",894,[29,188,189,191,192,194,195,44],{},[55,190,57],{}," im ",[14,193,34],{}," 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 ",[196,197,198],"code",{},"text2 · x",[29,200,201,203,204],{},[55,202,57],{}," 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.",[205,206,208],"trouble",{"symptom":207},"Beim Klick in die Timeline erscheint kein Keyframe?",[10,209,210],{},"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.",[29,212,213,215,216,219,220,223],{},[99,214,101],{}," oben in der Timeline bei ",[73,217,218],{},"Time"," den Zeitpunkt in Sekunden und bei ",[73,221,222],{},"Value"," den Wert der Eigenschaft ein. Das Element hat zu diesem Zeitpunkt jetzt genau diesen Wert.",[29,225,226,228,229,232,233,236,237,44,239,241],{},[55,227,70],{}," oben rechts in der Timeline, wie sich der Wert bis zu diesem Keyframe ändert: ",[73,230,231],{},"Linear"," für einen gleichmäßigen Übergang, ",[73,234,235],{},"Bezier"," für einen geschwungenen Verlauf. Beim ersten Keyframe gibt es nur ",[73,238,231],{},[114,240],{},[117,242],{"alt":243,"src":244,"width":245},"Timeline unten im Editor mit der animierten Eigenschaft text2 · x und ihren Keyframes.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-02\u002Fpublic",900,[29,247,248,252,253,255],{},[249,250,251],"drag",{},"Ziehe"," die senkrechte Zeitlinie in der Timeline von links nach rechts. Prüfe auf dem ",[14,254,61],{},", ob sich das Element am Anfang, in der Mitte und am Ende so bewegt, wie du willst.",[10,257,258,259,262],{},"Einen Keyframe verschiebst du, indem du ihn in der Timeline ziehst. Zum Löschen wählst du ihn aus und ",[55,260,261],{},"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ü.",[264,265,266],"tip",{},[10,267,268,269,172,272,91,275,278,279,282,283,44],{},"Mit Expressions kannst du auch selbst animieren: mit ",[196,270,271],{},"ANIMATE",[196,273,274],{},"LINEAR",[196,276,277],{},"CUBIC"," und dem Wert ",[196,280,281],{},"TIME"," für die aktuelle Zeit. Siehe ",[284,285,287],"a",{"href":286},"\u002Fde\u002Fhelp\u002Fexpressions-and-logic\u002Ffunctions","Übersicht der Expression-Funktionen",[46,289,291],{"id":290},"video-im-design-generator-testen","Video im Design-Generator testen",[10,293,294,295,297],{},"Der ",[14,296,20],{}," ist die Seite, auf der Nutzer dein Template ausfüllen und exportieren. Hier siehst du das Video so, wie Nutzer es bekommen.",[26,299,300,313,325,330,342],{},[29,301,302,304,305,308,309,312],{},[55,303,57],{}," oben rechts auf ",[73,306,307],{},"Share"," und dann auf ",[73,310,311],{},"Publish Template Link",". Dein Template ist jetzt über einen Link erreichbar.",[29,314,315,317,318,321,322,324],{},[55,316,57],{}," auf ",[73,319,320],{},"Copy URL"," und öffne den Link in einem neuen Browser-Tab. Der ",[14,323,20],{}," öffnet sich. Unter dem Design siehst du einen Play-Button, die Zeit und einen Regler.",[29,326,327,329],{},[55,328,57],{}," auf den Play-Button. Prüfe die Bewegung auch mit anderen Werten in den Input-Feldern, zum Beispiel mit einem längeren Text.",[29,331,332,304,334,337,338,341],{},[55,333,57],{},[73,335,336],{},"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 ",[73,339,340],{},"Download"," wählst.",[29,343,344,348],{},[345,346,347],"look",{},"Schau"," dir das heruntergeladene Video an. Prüfe, ob es vollständig und flüssig ist.",[10,350,351,352,354,355,44],{},"Jedes Video kostet beim Export gleich viele Credits, egal wie lang es ist: im ",[14,353,20],{}," und im Batch Editor 1 Credit, über die API 0,1 Credits. Siehe ",[284,356,358],{"href":357},"\u002Fde\u002Fhelp\u002Faccount-management\u002Fcredits","Credits: was Exporte kosten",[360,361,362],"related",{},[363,364,365,371,377,381],"ul",{},[29,366,367],{},[284,368,370],{"href":369},"\u002Fde\u002Fhelp\u002Ftemplate-management\u002Ftemplate-setup-and-settings","Template erstellen: Größe und Export-Format festlegen",[29,372,373],{},[284,374,376],{"href":375},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms","Aussehen, Effekte und Transformationen",[29,378,379],{},[284,380,287],{"href":286},[29,382,383],{},[284,384,386],{"href":385},"\u002Fde\u002Fhelp\u002Ftemplate-management\u002Fshare-template-link","Template-Link veröffentlichen: Design-Generator teilen",{"title":388,"searchDepth":389,"depth":389,"links":390},"",2,[391,392,393],{"id":48,"depth":389,"text":49},{"id":124,"depth":389,"text":125},{"id":290,"depth":389,"text":291},"design-elements-and-tools","Stelle dein Template auf MP4 oder MOV um, animiere Eigenschaften mit Keyframes auf der Timeline und teste das Video im Design-Generator.","md",[398,399,79,83,400,401,402,403,404,405,406,407,142,90,94,231,235,218,222,408],"video","animation","timeline","keyframes","15 seconds","Animation","Keyframes","Video","Timeline","animieren","15 Sekunden",{},true,150,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation.de","2026-09-17","---\ntitle: \"Template animieren: ein Video mit bewegten Elementen erstellen\"\ndescription: \"Stelle dein Template auf MP4 oder MOV um, animiere Eigenschaften mit Keyframes auf der Timeline und teste das Video im Design-Generator.\"\ncategory: design-elements-and-tools\norder: 150\nkeywords: [\"video\", \"animation\", \"MP4\", \"MOV\", \"timeline\", \"keyframes\", \"15 seconds\", \"Animation\", \"Keyframes\", \"Video\", \"Timeline\", \"animieren\", \"Animate a property\", \"Duration (s)\", \"FPS\", \"Linear\", \"Bezier\", \"Time\", \"Value\", \"15 Sekunden\"]\n---\nIm :place[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 :place[Design-Generator] als MP4 oder MOV exportieren. Bewegt werden deine eigenen Elemente: Texte, Bilder und Formen.\n\nDas geht in drei Schritten:\n\n1. Stelle das Template im :place[Properties-Panel] auf Video um.\n2. Animiere eine Eigenschaft mit der Timeline.\n3. Teste das Video im :place[Design-Generator].\n\n\n## Template auf Video umstellen\n\n1. :click[Klicke] auf dem :place[Canvas] auf eine leere Stelle. Jetzt ist kein Element ausgewählt, und das :place[Properties-Panel] zeigt die Einstellungen des Templates.\n2. :click[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.\n\n3. :type[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.\n4. :click[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.\n\n   ![Abschnitt Format mit MP4, Duration (s) und FPS.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-01\u002Fpublic){width=\"343\"}\n\n## Eigenschaft animieren\n\nEin 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.\n\n1. :click[Klicke] in der :place[Toolbar] auf das Werkzeug **Animate a property**, rechts neben **Create Input Field**. Das Werkzeug ist jetzt aktiv.\n\n   ![Toolbar mit markiertem Werkzeug Animate a property.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-03\u002Fpublic){width=\"673\"}\n\n2. :click[Klicke] auf dem :place[Canvas] oder im :place[Layers-Panel] auf das Element, das sich bewegen soll. Im :place[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.\n\n   ![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:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-04\u002Fpublic){width=\"894\"}\n\n3. :click[Klicke] im :place[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`.\n4. :click[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.\n\n   ::trouble{symptom=\"Beim Klick in die Timeline erscheint kein Keyframe?\"}\n   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.\n   ::\n\n5. :type[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.\n6. :click[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**.\n\n   ![Timeline unten im Editor mit der animierten Eigenschaft text2 · x und ihren Keyframes.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-02\u002Fpublic){width=\"900\"}\n\n7. :drag[Ziehe] die senkrechte Zeitlinie in der Timeline von links nach rechts. Prüfe auf dem :place[Canvas], ob sich das Element am Anfang, in der Mitte und am Ende so bewegt, wie du willst.\n\nEinen Keyframe verschiebst du, indem du ihn in der Timeline ziehst. Zum Löschen wählst du ihn aus und :click[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ü.\n\n::tip\nMit 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](\u002Fde\u002Fhelp\u002Fexpressions-and-logic\u002Ffunctions).\n::\n\n## Video im Design-Generator testen\n\nDer :place[Design-Generator] ist die Seite, auf der Nutzer dein Template ausfüllen und exportieren. Hier siehst du das Video so, wie Nutzer es bekommen.\n\n1. :click[Klicke] oben rechts auf **Share** und dann auf **Publish Template Link**. Dein Template ist jetzt über einen Link erreichbar.\n2. :click[Klicke] auf **Copy URL** und öffne den Link in einem neuen Browser-Tab. Der :place[Design-Generator] öffnet sich. Unter dem Design siehst du einen Play-Button, die Zeit und einen Regler.\n\n   \u003C!-- 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 \u002F total) and slider; highlight the player bar. See docs\u002Fknowledge-base-screenshots.md. -->\n\n3. :click[Klicke] auf den Play-Button. Prüfe die Bewegung auch mit anderen Werten in den Input-Feldern, zum Beispiel mit einem längeren Text.\n4. :click[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.\n5. :look[Schau] dir das heruntergeladene Video an. Prüfe, ob es vollständig und flüssig ist.\n\nJedes Video kostet beim Export gleich viele Credits, egal wie lang es ist: im :place[Design-Generator] und im Batch Editor 1 Credit, über die API 0,1 Credits. Siehe [Credits: was Exporte kosten](\u002Fde\u002Fhelp\u002Faccount-management\u002Fcredits).\n\n::related\n- [Template erstellen: Größe und Export-Format festlegen](\u002Fde\u002Fhelp\u002Ftemplate-management\u002Ftemplate-setup-and-settings)\n- [Aussehen, Effekte und Transformationen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms)\n- [Übersicht der Expression-Funktionen](\u002Fde\u002Fhelp\u002Fexpressions-and-logic\u002Ffunctions)\n- [Template-Link veröffentlichen: Design-Generator teilen](\u002Fde\u002Fhelp\u002Ftemplate-management\u002Fshare-template-link)\n::\n",{"title":5,"description":395},"help\u002Fdesign-elements-and-tools\u002Fvideo-and-animation.de","2026-10-22","hK4G2lNkfGzA-PRj8wAjrs_pdJh3QdnDw7_na9I7_Pc",1792680562719]