Einblick in meine Arbeit: So ist die animierte Zeitachse auf meiner Website entstanden
Hier ist die Timeline live in Aktion.
In diesem Beitrag zeige ich dir ein kleines Webdesign Projekt, das ich mit CSS Animation umgesetzt habe. Ganz ohne JavaScript, aber mit vielen kleinen Details.
Wenn du meine Website besucht hast, ist dir vielleicht die animierte Timeline mit der kleinen Rakete aufgefallen. In diesem Blogartikel zeige ich dir, wie ich genau diese Timeline mit HTML und CSS umgesetzt habe. Dabei war mein Ziel: Eine optisch schöne und technisch saubere Lösung – ganz ohne JavaScript oder externe Libraries.
Die Idee: Eine Reise durch meinen Arbeitsprozess
Statt nur eine langweilige Liste meiner Arbeitsschritte anzuzeigen, wollte ich eine visuelle Reise schaffen. Die Rakete symbolisiert den Fortschritt. Jeder Schritt bekommt dabei für einen Moment Aufmerksamkeit: Er hebt sich leicht an und wirkt lebendig.
Das hilft Besuchern, Inhalte nicht nur zu lesen, sondern zu erleben. Es fühlt sich natürlicher an, und die Animation führt die Augen automatisch durch den Ablauf.
HTML-Struktur
<div class="timeline-wrapper">
<div class="timeline-line">
<div class="timeline-marker">🚀</div>
</div>
<div class="timeline-steps">
<div class="timeline-step step1">
<h3>1. Zuhören & Verstehen</h3>
<p>Ich nehme mir Zeit, dein Business, deine Ziele und deine Zielgruppe zu verstehen.</p>
</div>
<div class="timeline-step step2">
<h3>2. Klar planen</h3>
<p>Struktur, Inhalte, Design – wir planen gemeinsam klar und unkompliziert.</p>
</div>
<div class="timeline-step step3">
<h3>3. Umsetzen mit System</h3>
<p>Ich baue deine Seite mit Fokus auf Design, Technik & Performance.</p>
</div>
<div class="timeline-step step4">
<h3>4. Starten & begleiten</h3>
<p>Nach dem Launch stehe ich für Support, Fragen und Updates weiterhin an deiner Seite.</p>
</div>
</div>
</div>
Die Linie selbst ist ein einfacher Div-Balken, und die Rakete ist ein Emoji (alternativ ginge auch ein SVG oder Font Awesome Icon). Sie bewegt sich dank CSS entlang der Linie.
CSS: Die Magie hinter der Bewegung
Diese Lösung ist ein gutes Beispiel dafür, wie man eine CSS Timeline ganz ohne JavaScript umsetzen kann. Sie ist leichtgewichtig, verständlich und kann als Basis für viele CSS Beispiele dienen.
Die Rakete bewegt sich mit einer Keyframe-Animation von links nach rechts. Während sie an bestimmten Positionen “pausiert”, hebt sich der entsprechende Step leicht an und bekommt eine kleine Float-Animation. Das wirkt, als würde die Rakete dort verweilen und den Schritt “aktivieren”.
Hier ist der komplette CSS-Code:
.timeline-marker {
position: absolute;
top: -10px !important;
left: 0;
font-size: 36px;
transform: rotate(25deg);
animation: markerSlide 10s infinite linear, rocketFloat 1.5s ease-in-out infinite;
}
@keyframes markerSlide {
0% { left: 0%; }
7% { left: 9%; }
22% { left: 9%; }
32% { left: 35%; }
47% { left: 35%; }
57% { left: 61%; }
72% { left: 61%; }
82% { left: 88%; }
97% { left: 88%; }
100% { left: 100%; }
}
@keyframes rocketFloat {
0%, 100% { transform: rotate(25deg) translateY(0); }
50% { transform: rotate(25deg) translateY(-6px); }
}
Die MarkerSlide-Animation bestimmt die Position der Rakete, und rocketFloat sorgt dafür, dass sie dabei noch leicht auf- und abschwebt. Das wirkt viel organischer als eine lineare Bewegung.
Step-Animationen: Synchron mit der Rakete
Die Bewegung der einzelnen Schritte wirkt fast wie eine kleine HTML Animation. Alles läuft synchron zur Rakete und bringt die Timeline dynamisch zum Leben.
Die Rakete stoppt kurz bei jedem Abschnitt. Während dieser Zeit hebt sich der jeweilige Step mit einer eigenen Animation leicht an und bekommt einen “Hover-Look”.
Hier ein Beispiel für Step 1:
@keyframes shiftStep1 {
0%, 6.9%, 22.1%, 100% { transform: translateY(0); }
7% { transform: translateY(-45px); }
11% { transform: translateY(-55px); }
15% { transform: translateY(-45px); }
19% { transform: translateY(-55px); }
22% { transform: translateY(-45px); }
}
@keyframes shiftStep2 {
0%, 31.9%, 47.1%, 100% { transform: translateY(0); }
32% { transform: translateY(-45px); }
36% { transform: translateY(-55px); }
40% { transform: translateY(-45px); }
44% { transform: translateY(-55px); }
47% { transform: translateY(-45px); }
}
@keyframes shiftStep3 {
0%, 56.9%, 72.1%, 100% { transform: translateY(0); }
57% { transform: translateY(-45px); }
61% { transform: translateY(-55px); }
65% { transform: translateY(-45px); }
69% { transform: translateY(-55px); }
72% { transform: translateY(-45px); }
}
@keyframes shiftStep4 {
0%, 81.9%, 97.1%, 100% { transform: translateY(0); }
82% { transform: translateY(-45px); }
86% { transform: translateY(-55px); }
90% { transform: translateY(-45px); }
94% { transform: translateY(-55px); }
97% { transform: translateY(-45px); }
}
Jeder Step hat eigene Keyframes mit leicht versetzten Zeitpunkten, damit die Bewegungen synchron zur Rakete ablaufen. Step 2, 3 und 4 folgen demselben Prinzip.
Tablet-Version: Hover statt Animation
Da auf mobilen Geräten und Tablets weniger Platz ist und zu viel Bewegung oft stört, habe ich dort die automatische Animation deaktiviert. Stattdessen reagieren die Steps nur bei Hover.
@media (max-width: 980px) {
.timeline-marker { display: none; }
.timeline-line { display: none; }
.step1, .step2, .step3, .step4 { animation: none; }
.timeline-step:hover {
transform: translateY(-12px);
transition: transform 0.3s ease;
}
}
So bleibt das Erlebnis auch auf kleineren Bildschirmen performant und benutzerfreundlich.
Wo du so eine Timeline einsetzen kannst
Diese Form der Timeline eignet sich nicht nur für die Darstellung von Arbeitsabläufen. Du kannst sie auch verwenden für:
- Projektphasen (z. B. Website-Redesign, Launch-Kampagnen)
- Onboarding-Prozesse
- Produktentwicklungs-Roadmaps
- Meilensteinübersichten für Kunden oder Investoren
Je nach Kontext kannst du das Design anpassen – z. B. mit Icons, Fortschrittszahlen oder sogar Tooltips.
Fazit
Wenn du selbst eine Timeline erstellen möchtest, kannst du den hier gezeigten Code direkt als Vorlage verwenden. Ganz gleich ob für ein klassisches Webprojekt oder eine Divi Animation – der Ablauf ist übertragbar.
Diese Timeline ist ein gutes Beispiel dafür, was man mit reinem CSS alles erreichen kann. Kein JavaScript, kein Framework, keine Bibliothek. Nur HTML, ein bisschen Fantasie und ein gutes Verständnis von Animationen.
Das Beste daran: Es sieht nicht nur gut aus, sondern bleibt auch barrierearm und performant. Genau so will ich Webentwicklung umsetzen.
Wenn du Fragen hast oder sowas für dein eigenes Projekt brauchst, melde dich gerne bei mir!
Hier 5 einfach CSS Tricks.
0 Comments