/* ========================================================================== OMNISON — Alexander Matthäi animations.css — Page-Load- und Hover-Animationen ========================================================================== */ /* Footer auf der Startseite dicht unter das Video ziehen */ body.homepage #footer-sections { margin-top: -60px !important; position: relative; z-index: 10; } /* -------------------------------------------------------------------------- Keyframes -------------------------------------------------------------------------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Opacity erreicht 100% deutlich vor dem Ende der Bewegung (bei 40% der Laufzeit) — die Position gleitet zwar noch weiter, ist aber schon voll sichtbar, statt erst am Ende der Slide-Bewegung aufzutauchen. Wichtig: opacity muss auch bei 100% explizit auf 1 stehen — fehlt der Wert im letzten Keyframe, synthetisiert der Browser ihn aus dem zugrunde liegenden (statisch deklarierten) opacity:0 der Basis-Regel, wodurch die Opacity nach dem Aufblenden bei 40% bis zum Ende wieder auf 0 zurückfällt. */ @keyframes slideInFromLeft { 0% { opacity: 0; transform: translateX(-40px); } 40% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes curtainOut { from { opacity: 1; } to { opacity: 0; } } @keyframes videoFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInOnly { from { opacity: 0; } to { opacity: 1; } } /* -------------------------------------------------------------------------- Header-Animation — Startseite und Work-Übersicht -------------------------------------------------------------------------- */ /* 25% schneller als zuvor (1s -> 0.75s), Delays gleichermaßen gestaucht */ body.homepage .header-title-logo, body.workpage .header-title-logo { animation: slideInFromLeft 0.75s ease-out both; animation-delay: 0.225s; } body.homepage .header-nav-item, body.workpage .header-nav-item { animation: slideInFromLeft 0.75s ease-out both; opacity: 0; } body.homepage .header-nav-item:nth-child(1), body.workpage .header-nav-item:nth-child(1) { animation-delay: 0.45s; } body.homepage .header-nav-item:nth-child(2), body.workpage .header-nav-item:nth-child(2) { animation-delay: 0.6s; } body.homepage .header-nav-item:nth-child(3), body.workpage .header-nav-item:nth-child(3) { animation-delay: 0.75s; } /* Nur beim allerersten Laden der Seite (Session) einfahren lassen — bei jedem weiteren Landen auf dieser Seite (z.B. zurück von Über/Kontakt) steht das Menü sofort statisch da, ohne erneut zu animieren. Klasse "intro-seen" wird per Inline-Script in gesetzt, siehe index.html — Spezifität (3 Klassen) schlägt die Regeln oben (2 Klassen). */ html.intro-seen body.homepage .header-title-logo, html.intro-seen body.workpage .header-title-logo, html.intro-seen body.homepage .header-nav-item, html.intro-seen body.workpage .header-nav-item { animation: none; opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Startseite — beiger Vorhang über dem Video beim Page-Load -------------------------------------------------------------------------- */ .video-section::before { content: ''; position: absolute; inset: 0; background-color: #F6F3EC; z-index: 100; pointer-events: none; animation: curtainOut 1.5s ease-out forwards; animation-delay: 0.4s; } /* Video sanft einfaden */ .video-background video { animation: videoFadeIn 2s ease-out both; animation-delay: 0.4s; } /* -------------------------------------------------------------------------- Startseite — Hover-PNG über dem Video -------------------------------------------------------------------------- */ .video-section::after { content: ""; position: absolute; bottom: 13.5%; left: 50%; transform: translateX(-50%); width: 40%; max-width: 340px; aspect-ratio: 800 / 300; background-image: url('../assets/bilder/machina.png'); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; z-index: 50; } /* Fallback für Browser ohne aspect-ratio (Safari < 15): das Pseudo-Element hat keinen Inhalt und wäre ohne die Eigenschaft 0px hoch — das PNG bliebe auch bei Hover unsichtbar. 127.5px = max-width 340px * 300/800. Weil background-size:contain das Bild proportional einpasst und zentriert, schadet die feste Höhe auch dann nicht, wenn die Box durch width:40% schmaler ausfällt: das PNG wird dann nur kleiner in der Box zentriert. */ @supports not (aspect-ratio: 1 / 1) { .video-section::after { height: 127.5px; } } /* Nur Desktop mit echter Maus — analog zu den Kachel-Hovern (css/work.css) */ @media (hover:hover) and (pointer:fine) and (min-width: 980px) { .video-section:hover::after { opacity: 1; } } /* -------------------------------------------------------------------------- Profil — Spalten gestaffelt einfaden -------------------------------------------------------------------------- */ .profil-item { animation: fadeInUp 0.8s ease-out both; } .profil-item:nth-child(1) { animation-delay: 0.1s; } .profil-item:nth-child(2) { animation-delay: 0.3s; } /* -------------------------------------------------------------------------- Über — Textblock NUR einblenden (keine Positionsbewegung), zügig -------------------------------------------------------------------------- */ .ueber-text { animation: fadeInOnly 0.385s ease-out both; animation-delay: 0.055s; } /* -------------------------------------------------------------------------- Kontakt — Zeilen gestaffelt einfaden (TEST: schnellerer Auftritt, damit die Zielseite unmittelbar nach dem Einfahren der Übersicht entsteht — Dauer 0.8s->0.5s, Staffelung deutlich enger) -------------------------------------------------------------------------- */ .kontakt-content > * { animation: fadeInUp 0.5s ease-out both; } .kontakt-content > *:nth-child(1) { animation-delay: 0.03s; } .kontakt-content > *:nth-child(2) { animation-delay: 0.09s; } .kontakt-content > *:nth-child(3) { animation-delay: 0.15s; } .kontakt-content > *:nth-child(4) { animation-delay: 0.21s; } .kontakt-content > *:nth-child(5) { animation-delay: 0.27s; } /* -------------------------------------------------------------------------- Impressum / Datenschutz — Überschriften und Absätze blenden gestaffelt von oben nach unten ein, reines Fade ohne Versatz/Bewegung. -------------------------------------------------------------------------- */ .legal-section > * { opacity: 0; animation: fadeInOnly 0.6s ease-out both; } .legal-section > *:nth-child(1) { animation-delay: 0.05s; } .legal-section > *:nth-child(2) { animation-delay: 0.12s; } .legal-section > *:nth-child(3) { animation-delay: 0.19s; } .legal-section > *:nth-child(4) { animation-delay: 0.26s; } .legal-section > *:nth-child(5) { animation-delay: 0.33s; } .legal-section > *:nth-child(6) { animation-delay: 0.40s; } .legal-section > *:nth-child(7) { animation-delay: 0.47s; } .legal-section > *:nth-child(8) { animation-delay: 0.54s; } .legal-section > *:nth-child(9) { animation-delay: 0.61s; } .legal-section > *:nth-child(10) { animation-delay: 0.68s; } .legal-section > *:nth-child(11) { animation-delay: 0.75s; } .legal-section > *:nth-child(12) { animation-delay: 0.82s; } .legal-section > *:nth-child(13) { animation-delay: 0.89s; } .legal-section > *:nth-child(14) { animation-delay: 0.96s; } .legal-section > *:nth-child(15) { animation-delay: 1.03s; } /* -------------------------------------------------------------------------- Footer — immer sofort sichtbar, keine Animation -------------------------------------------------------------------------- */ #footer-sections, #footer-sections * { animation: none !important; opacity: 1 !important; transform: none !important; }