/* ========================================================================== Intro-Animation beim Laden Nicht von Osmo — aber bewusst mit deren Easing und Timing gebaut, damit es zu den beiden Komponenten passt. ========================================================================== */ /* --- Header fährt von oben rein ------------------------------------------ Zielt auf .twostep-nav__wrap, nicht auf .twostep-nav__bar: die Bar animiert Osmo selbst über max-width, da wollen wir nicht dazwischenfunken. -------------------------------------------------------------------------- */ .twostep-nav__wrap { animation: osmo-nav-in .9s var(--osmo-ease) .15s both; } @keyframes osmo-nav-in { from { opacity: 0; transform: translateY(-1.25rem); } to { opacity: 1; transform: translateY(0); } } /* --- Name steigt zeichenweise aus der Maske ------------------------------ .intro liegt am und wird per Inline-Script im gesetzt, damit der Text nicht kurz unmaskiert aufblitzt. -------------------------------------------------------------------------- */ .intro .resource-name { visibility: hidden; } /* Wort-Huelle aus intro.js: haelt die Zeichen eines Worts auf einer Zeile. */ .resource-name .word { display: inline-block; white-space: nowrap; } .resource-name .char { display: inline-block; overflow: hidden; vertical-align: top; /* Unterlängen von J und g würden sonst abgeschnitten */ padding-bottom: .16em; margin-bottom: -.16em; } .resource-name .char > span { display: inline-block; transform: translateY(110%); transition: transform .95s var(--osmo-ease); } .resource-name.is-in .char > span { transform: translateY(0%); } @media (prefers-reduced-motion: reduce) { .twostep-nav__wrap { animation: none; } .resource-name .char > span { transform: none; transition: none; } } /* --- Kacheln kommen nach dem Namen ---------------------------------------- fill-mode ist bewusst "backwards", nicht "both": bei "both" bliebe der transform der Animation kleben und wuerde Osmos Hover-Skalierung (scale 0.975) ueberschreiben. So gilt nach dem Intro wieder deren Regel. -------------------------------------------------------------------------- */ .demo-links__link { animation: osmo-tile-in .8s var(--osmo-ease) backwards; } .demo-links__link:nth-child(1) { animation-delay: .70s; } .demo-links__link:nth-child(2) { animation-delay: .78s; } .demo-links__link:nth-child(3) { animation-delay: .86s; } @keyframes osmo-tile-in { from { opacity: 0; transform: translateY(1.5rem) scale(.94) rotate(0.001deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0.001deg); } } @media (prefers-reduced-motion: reduce) { .demo-links__link { animation: none; } }