# Animiertes Logo: so erweckst du dein Logo zum Leben [Canonical HTML page](https://gradiently.design/de/guide/animated-logo) Eine Logoanimation sollte sich anfühlen, als würde das Logo Atem holen, nicht eine Nummer vorführen. Hier sind die wenigen Techniken, die funktionieren, und die Regeln, die sie geschmackvoll halten. ## The short version - Ein animiertes Logo ist das Logo einer Marke mit einer kurzen Bewegung, etwa einer Enthüllung, einer Linie, die sich selbst zeichnet, Teilen, die sich zusammensetzen, oder einer Farbverschiebung. - Die meisten Logoanimationen für Intros und Outros funktionieren am besten bei etwa einer bis drei Sekunden und enden auf dem exakten statischen Logo. - Eine Idee pro Animation reicht, und die Bewegung sollte zur Persönlichkeit der Marke passen, so wie ihre Farben und Schrift. - Websites können Logos mit SVG und CSS oder mit Lottie-Dateien animieren, während Video MP4 braucht, E-Mail ein GIF und der Schnitt ein Format mit Transparenz. - Jedes animierte Logo braucht eine statische Version, für kleine Größen, Druck und Menschen, die reduzierte Bewegung bevorzugen. Ein **animiertes Logo** ist dein Logo mit einer kurzen, gezielten Bewegung: Es enthüllt sich, zeichnet seine eigenen Linien, setzt sich aus seinen Teilen zusammen, wechselt die Farbe oder atmet sanft in einer Schleife. Die besten sind kurz, für ein Intro meist eine bis drei Sekunden, und enden immer auf dem exakten Logo, das die Leute schon kennen. Stell es dir so vor: Das Logo kommt an, es führt nichts vor. ## Fünf Wege, ein Logo zu animieren Fast jede gute Logoanimation ist eine von fünf Techniken, manchmal zwei kombiniert. Wähle die, die zur Form deines Logos und zum Charakter der Marke passt. | Technik | Was passiert | Passt zu | | --- | --- | --- | | Enthüllung | Das Logo blendet ein, wischt oder maskiert sich ins Bild | Jedem Logo, die sicherste Wahl | | Zeichnen | Linien zeichnen sich selbst, dann füllen sie sich | Linienbasierten Zeichen, Monogrammen, Signaturen | | Zusammensetzen | Teile gleiten oder skalieren an ihren Platz | Logos aus einzelnen Formen | | Verschieben | Farbe oder ein Farbverlauf wandert durch das Logo | Logos mit Farbverlauf und kräftigen Wortmarken | | Ruhige Schleife | Ein feines, endloses Atmen oder Schimmern | Ladezuständen, Bühnenbildschirmen, Livestreams | Starte mit einer Enthüllung. Geh die Liste nur weiter hinunter, wenn dir die Form des Logos einen Grund gibt. ## Regeln, die eine Logoanimation geschmackvoll halten Eine Logoanimation wird oft wiederholt: am Anfang jedes Videos, bei jedem Seitenaufruf, bei jedem Event. Alles Clevere nutzt sich schnell ab. Zurückhaltung lässt Leute sie auch beim hundertsten Mal genießen. [Prinzipien des Motion Designs](https://gradiently.design/de/guide/motion-design-principles) behandelt die Überlegung ausführlicher. ### Vermeide - Animationen, die länger dauern als die Botschaft, die sie einleiten - Das Logo drehen, springen oder explodieren lassen - Auf einer Pose enden, die nicht das echte Logo ist - Bewegung, die dem Charakter der Marke widerspricht - Nur eine Version ohne statischen Rückfall ### Mach - Eine bis drei Sekunden für Intros und Outros - Eine Idee, sauber umgesetzt - Auf dem exakten statischen Logo enden und es halten - Ruhige Marken bewegen sich langsam, lebhafte dürfen flott sein - Ein statisches Logo für kleine Größen und Druck behalten Stimme die Bewegung so auf die Marke ab wie Farben und Schrift. Das Logo einer Kanzlei könnte über eine Sekunde mit weichem Easing einblenden. Das eines Musikfestivals kann mit ein wenig Überschwingen einrasten. [Markenpersönlichkeit](https://gradiently.design/de/guide/brand-personality) hilft dir, zuerst den Charakter zu benennen, und [Easing](https://gradiently.design/de/guide/easing) macht daraus Kurven. ## So machst du eine Logoanimation zum Zeichnen in SVG Der Zeicheneffekt nutzt einen schlauen Trick in SVG. Eine Kontur lässt sich als Striche zeichnen, und ist ein Strich so lang wie der ganze Pfad, kannst du ihn ins Bild schieben, indem du seinen Versatz animierst. Setzt du `pathLength="1"` am Pfad, wird die Rechnung einfach: Der Pfad zählt als eine Einheit lang, egal wie lang er wirklich ist. ```html ``` Ein Monogramm-N als einzelner Pfad. Der zugängliche Name bleibt am SVG, egal was die Animation tut. ```css .draw { stroke-dasharray: 1; stroke-dashoffset: 1; /* hidden: the dash starts one full length away */ animation: draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } /* drawn */ } @media (prefers-reduced-motion: reduce) { .draw { animation: none; stroke-dashoffset: 0; } } ``` Die Linie zeichnet sich in 1,2 Sekunden mit Ease-in-out selbst und erscheint für Besucher, die reduzierte Bewegung bevorzugen, einfach so. ## Ein Logo mit Farbverlauf animieren Logos mit Farbverlauf haben eine Bewegung schon eingebaut: Lass die Farbe wandern. Eine langsame Verschiebung des Farbverlaufs durch eine Wortmarke oder ein Icon wirkt wie Licht, das über die Fläche wandert, und hält die Form völlig still, was der Lesbarkeit guttut. Der Trick für einen sauberen Loop ist ein Farbverlauf, der auf der Farbe endet, mit der er beginnt, damit die Wiederholung keine Naht hat. Violett, Rosé, Violett: `linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%)` Ein symmetrischer Farbverlauf. Um genau seine eigene Breite zur Seite geschoben, deckt er sich mit sich selbst, sodass das Schimmern endlos ohne Sprung läuft. ```css .wordmark { background: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } @keyframes shimmer { to { background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { .wordmark { animation: none; } } ``` Die Farbe wandert alle sechs Sekunden durch die Buchstaben, in konstantem Tempo, damit der Loop nie stockt. Text mit Farbverlauf hat eigene Lesbarkeitsregeln, siehe [Farbverlaufstext in CSS](https://gradiently.design/de/guide/css-gradient-text). Und sorge dafür, dass es das Logo auch in einer einzigen flachen Farbe gibt, wie [Logos mit Farbverlauf](https://gradiently.design/de/guide/gradient-logo) erklärt. ## Wie lang ein animiertes Logo sein sollte - **Video-Intros und -Outros:** etwa eine bis drei Sekunden, dann das fertige Logo einen Moment halten. - **Website-Header:** einmal beim ersten Besuch schnell abspielen, nie bei jedem Seitenwechsel. - **Ladezustände:** eine langsame, ruhige Schleife, die nicht ungeduldig wirkt. - **Bühnenbildschirme und Streams:** eine sehr langsame Schleife, denn sie kann stundenlang zu sehen sein. Die Wortmarke Northlight mittig auf einem breiten Farbverlaufshintergrund, als Schlussbild eines Logo-Intros Das letzte Bild eines Intros sollte das Logo exakt so zeigen, wie es überall sonst erscheint, auf dem üblichen Hintergrund der Marke. ## In welchem Format du ein animiertes Logo exportierst | Wo es läuft | Format | Hinweise | | --- | --- | --- | | Website oder App | SVG mit CSS oder eine Lottie-Datei | In jeder Größe scharf, winzige Dateien, kann reduzierte Bewegung respektieren | | Social-Video | MP4 | Auf einem Hintergrund platziert, keine Transparenz nötig | | Videoschnitt | Ein Format mit Transparenz, etwa ProRes 4444 | Damit Cutter es über beliebiges Material legen können | | E-Mail-Signatur oder Newsletter | GIF | Kurz und klein halten, das erste Bild sollte das ganze Logo sein | | Präsentationen | MP4 oder die eigene Animation des Tools | Am Rechner testen, der präsentiert | Lottie ist ein JSON-Animationsformat, oft aus After Effects exportiert, das in Web- und App-Playern läuft. Mehr zu Loops und Dateitypen steht in [GIF oder MP4](https://gradiently.design/de/guide/gif-vs-mp4). Und was du auch exportierst, kombiniere es mit einem passenden Hintergrund: Ein animiertes Logo über einer ruhigen, stehenden Fläche liest sich besser als eines über unruhigem Filmmaterial. [Ein Logo auf einen Farbverlauf setzen](https://gradiently.design/de/guide/logo-on-gradient-background) behandelt Kontrast und Platzierung. ## FAQ ### Wie lang sollte ein animiertes Logo sein? Für Video-Intros und -Outros etwa eine bis drei Sekunden, mit Ende auf dem statischen Logo, das kurz gehalten wird. Ruhige Schleifen für Bildschirme dürfen länger und langsamer sein. ### Wie animiere ich ein Logo am einfachsten? Mit einer einfachen Enthüllung: einer Blende, einem Wischer oder einer Maske, die das Logo über etwa eine Sekunde freilegt. Das funktioniert bei jedem Logo und ist schwer falsch zu machen. ### In welchem Format sollte ein animiertes Logo vorliegen? SVG mit CSS oder Lottie für Websites und Apps, MP4 für Social-Video, ein Format mit Transparenz wie ProRes 4444 für den Schnitt und GIF für E-Mail. ### Wie lasse ich ein Logo sich selbst zeichnen? Setze in SVG pathLength am Pfad auf 1, gib ihm ein stroke-dasharray von 1 und animiere stroke-dashoffset von 1 auf 0. ### Brauche ich trotzdem ein statisches Logo? Ja. Kleine Größen, Druck, Favicons und Menschen, die reduzierte Bewegung bevorzugen, brauchen alle die statische Version, und jede Animation sollte darauf enden.