/* ========================================================================== Einblende-Animationen (ersetzen die urspruenglichen JavaScript-Animationen) Prinzip (funktioniert auch beim Doppelklick / file://): - Ohne aktives JavaScript ist alles ganz normal sichtbar. - js/reveal.js setzt die Klasse .reveal-on auf das -Element. Erst dann starten markierte Elemente versteckt und werden beim Hereinscrollen sanft eingeblendet. ========================================================================== */ .reveal-on .reveal { opacity: 0; transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; } /* Start-Richtung je nach urspruenglicher Animation */ .reveal-on .reveal-up { transform: translateY(32px); } .reveal-on .reveal-fade { transform: none; } .reveal-on .reveal-zoom { transform: scale(.85); } /* Sichtbarer Endzustand (von reveal.js gesetzt) */ .reveal-on .reveal.reveal-in { opacity: 1; transform: none; } /* Nutzer, die reduzierte Bewegung bevorzugen: keine Animation */ @media (prefers-reduced-motion: reduce) { .reveal-on .reveal { transition: none; opacity: 1; transform: none; } }