Animation

Animation: Bewegung macht Mobilität erlebbar

Hier findest du die Vorgaben für Layout Animation, sowie Verweise auf Icons, UI-Elemente und den Puls-Effekt. Gemeinsam bilden sie ein konsistentes Bewegungsprinzip, das Orientierung bietet, Interaktionen verdeutlicht und die Marke lebendig wirken lässt.

Das Wichtigste in Kürze

Bewegung spiegelt unsere Persönlichkeit wider.
Animation unterstützt das Storytelling.
Animation dient der Nutzerführung.

Animationskurven – emotional und funktional

Zwei Animationskurven helfen uns, Bewegung ausdrucksstark bis funktional darzustellen.

Unsere charakteristische Animationskurve – abgeleitet von unseren Markenwerten – wird durch eine zweite, funktionale Kurve ergänzt. Diese sorgt für schnelles Feedback in bestimmten Interaktionen mit den Nutzenden. Sie ist sachlich und zurückhaltend, um den Ablauf nicht zu verzögern.

Die Bewegung beginnt mit einer natürlichen Beschleunigung. Das Grundtempo ist dynamisch und zielgerichtet, ein kontrolliertes Abbremsen beendet die Animation souverän.

EmotionalDie emotionale Animationskurve verleiht animierten Elementen Dynamik und Charakter. Sie sorgt für Prägnanz und bildet die Grundlage für die Animationen von Icons, Bannern etc.Web-Anwendungen – CSS:Transition-Timing-Function: Cubic-Bezier (0.27, 0.05, 0.4, 0.95)Adobe After Effects:Ausgehende Geschwindigkeit: 33 %Ankommende Geschwindigkeit: 70 %

FunktionalDie funktionale Animationskurve wird für schnelle und subtile Animationen verwendet. Überall dort, wo der Nutzer schnelles Feedback (z. B. Drop-down-Menü) in einer Interaktion benötigt.Web-Anwendungen – CSS:Transition-Timing-Function:Cubic-Bezier (0.15, 0, 0.45, 1)Adobe After Effects:Ausgehende Geschwindigkeit: 15 %Ankommende Geschwindigkeit: 55 %

Bewegungsmuster

Angelehnt an Bewegungen und physikalische Gesetzmäßigkeiten der realen Welt leiten sich die Bewegungsmuster aus den alltäglichen Interaktionen von Millionen Menschen mit der Deutschen Bahn ab.

Standard Animation

Von links nach rechts

Klare, richtungsweisende Flächenbewegung – abgeleitet von der natürlichen Fahrtrichtung der Züge. Sie bildet das Fundament jeder unserer Layout-Animationen.

Ergänzende Animation

Zoom

Die skalierende Bewegung rückt Elemente dynamisch in den Fokus. Zur gezielten Hervorhebung von Call-to-Actions werden Elemente von 0 auf 100 % skaliert. Eine dezente, pulsierende Bewegung von 10–15 % verstärkt den Effekt.

Layout-Animation

Markenmodul

Das Layout folgt definierten Bewegungsmustern und kann – abhängig von Einsatz und Anwendung – entweder durch eine Bewegung von links nach rechts oder über einen Skalierungseffekt aufgebaut werden. Wichtig ist dabei, die Abfolge der einzelnen Elemente konsequent einzuhalten. Detaillierte Informationen zum Markenmodul findest du im Bereich Layout.

Standard Layout-Animation

Von Links nach Rechts

Unsere Kommunikation folgt einer klaren Animationsreihenfolge:

Motiv/Hintergrund
Absender/Logo
Botschaft
Puls

Ergänzende Elemente

Zoom

Der Zoom-Effekt wird gezielt für besondere Inszenierungen eingesetzt – etwa bei Störern oder Buttons. Er ersetzt jedoch nicht das Standard-Bewegungsmuster (von links nach rechts). Der Call-to-Action erscheint immer zuletzt.

5. Optional: Call To Action (z. B. Störer oder Button)

Ergänzung für Layout (Störer+Button)

Störer und Buttons dienen als gezielte Ergänzungen innerhalb unseres klassischen Markenmoduls. Sie lenken die Aufmerksamkeit und heben wichtige Informationen oder Call-to-Actions hervor.

Weitere Informationen zur Erstellung eines Störers oder Buttons findest du hier:

> Störer

> UI-Elemente

Störer werden ausschließlich im Bewegungsmuster „Zoom“ animiert – sowohl beim Ein- als auch beim Ausblenden.

Buttons werden ausschließlich im Bewegungsmuster „Zoom“ animiert – sowohl beim Ein- als auch beim Ausblenden.

Detaillierte Animationen

Puls-Animation

Detaillierte Informationen zum Einsatz des Pulses als bewegtes Element findest du im Bereich Puls.

Puls als UI-Element

Der Puls kann den Takt vorgeben, Inhalte begleiten oder gezielt Akzente setzen. Sein Grundtempo ist dynamisch und passt sich dem jeweiligen Kontext an – natürlich, fließend und zielgerichtet. Die genauen Beschleunigungswerte findest du in unseren Animationskurven.

Puls als lebendiger Charakter

Als lebendiger Charakter vermittelt der Puls auf abstrakte Weise Emotionen und einfache Informationen. Setze ihn in der digitalen Interaktion mit Nutzern ein – zum Beispiel als Chatbot oder als Bestandteil von Voice User Interfaces (VUI). So stärkst du die emotionale Bindung zwischen Mensch und Marke.

Icon-Animation

Illustrative Icons werden durch subtile Animationen zum Leben erweckt. Diese können entweder aufbauend oder motivbezogen animiert werden. Weitere Informationen zu Icons findest du im Kapitel Illustrative Icons.

Aufbauend animierte Icons

Bei diesen Icons werden einzelne Linien oder Elemente schrittweise animiert, sodass sich das Symbol Stück für Stück sichtbar aufbaut.

Motivbezogen animierte Icons

Diese Icons erscheinen nicht einfach, sondern entfalten sich durch subtile Bewegungen wie Pulsieren, Schwingen oder rhythmisches Hervorheben. Die Animation greift das Motiv des Icons auf und betont seine Funktion oder Bedeutung – sie zieht Aufmerksamkeit auf sich, ohne aufdringlich zu wirken.

Animierte Inhalte im Digitalen Out-of-Home

Eine Besonderheit digitaler OOH-Anzeigen: Bei der Links-nach-rechts-Bewegung der Schrift sorgt ein zusätzlicher leichter Motion Blur für ein sanfteres Erscheinungsbild im urbanen Kontext von Mobilität und Bewegung. Ergänzend schafft ein subtiler räumlicher Effekt Tiefe im Bild. Beide Effekte unterstreichen die Botschaft, ohne vom Wesentlichen abzulenken.

Hinweis: Da Key-Informationen im Digitalen Out-of-Home häufig nur innerhalb von 2–3 Sekunden wahrgenommen werden, müssen alle Elemente kompakt, gesammelt und unmittelbar hintereinander einfliegen. Die Animation folgt daher einem klaren, schnell erfassbaren Ablauf, der die kurze Wahrnehmungsspanne optimal nutzt – gerade im Vorbeigehen.

Motion Blur

Bei der Standardanimation der Textelemente (von links nach rechts) sorgt ein leichter Motion Blur für eine weichere und natürlichere Bewegung. So entsteht ein hochwertiger, flüssiger Gesamteindruck.

Pan-Effekt

Der Pan-Effekt erzeugt eine sanfte horizontale oder vertikale Bewegung im Bild und vermittelt so subtile Dynamik und Tiefe, ähnlich einer Kamerafahrt. Textelemente und das DB-Markenmodul bleiben statisch.

Dos and Don'ts

Die Elemente werden mit einer natürlichen Easing-Kurve (ease-in und ease-out) animiert.

Vermeide unruhige oder unnatürliche Bewegungen, wie ruckartige oder sprunghafte Animationen.

Die Animationen sind flüssig und vermeiden unnötige Wartezeiten.

Vermeide träge oder zu langsame Bewegungen.

Die Animationsrichtung des Markenmoduls verläuft stets von links nach rechts.

Andere Animationsrichtungen sollten vermieden werden.

Die Zoom-Bewegung ist stimmig und harmoniert mit dem Layout.

Vermeide überproportionale Skalierungen.