Geschmeidiger Wechsel zwischen den Seiten einer Website – via pure CSS

Die Menüs (und die Details-Tag) waren bis Mitte November 2025 durch Änderung der Position beim Öffnen animiert. Dies war eigentlich in Ordnung; vom Typ noch im Gebrauch auf der Seite animiertes Öffnen UND Schließen von Details-Tag via puren Cascading-Style-Sheets (CSS)

Der Wechsel aber zwischen den einzelnen Seiten dieser Website war „abrupt“. Dieses Abrupte mag nicht unseren Erfahrungen entsprechen: etwa beim Lesen eines Buches kommt das Umblättern auch eher geschmeidig daher … und dies entspricht wohl auch der Erfahrung bei Smartphones / Apps (da kann ich aber nicht mitreden, mein „Handy“ kann nur telefonieren, aber immerhin …).

Ich mag aber nun keine Scripte – insbesondere nicht fürs Ausspionieren der Menschen im Netz; ich mag sie aber auch nicht für irgendeinen Design-Effekt.

Pur via Cascading-Style-Sheets (CSS) geht das Öffnen einzelner Seiten ebenfalls etwas geschmeidiger, also jeder Seitenwechsel ist gut erkennbar, „Erfahrungs-konform“, wenn man so will. Aber auch das Öffnen der Menüs gefallen mir mit der neuen Anweisung besser; es wirkt irgendwie insgesamt ruhiger?

Wie auch immer: Ist jetzt veröffentlicht. Wem es gefällt, schreibe mir, wem es nicht gefällt, möge für immer schweigen …

Der (einfache) Code
body, details[open] summary ~ * {
  animation: .6s ease uebergang;
}

@keyframes uebergang {
      0% {opacity: 0;}
    50% {opacity: 0;}
  100% {opacity: 1;}
}

Dies macht für die Browser eigentlich keine nennenswerte Mehrarbeit und erscheint mir überhaupt nicht fehleranfällig.

„Aufblättern“ oder ein „Aufrollen“ der Menüs sieht man häufig; auch schön … Alles, was nützlich erscheint, eine Website gut zu bedienen, sei gut zu prüfen …

Man sollte alles so einfach wie möglich sehen – aber auch nicht einfacher.

– Albert Einstein.