https://wiki.bzz.ch/ 2026-06-02T21:19:28+00:00 https://wiki.bzz.ch/ https://wiki.bzz.ch/_media/wiki/logo.png text/html 2026-05-31T22:23:09+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.bzz.ch/de/modul/m291/learningunits/lu13/theorie/a_transitions_recap?rev=1780266189&do=diff LU13a - CSS Transitions (Wiederholung) [ Transition Cards] CSS Transitions kennen Sie bereits aus früheren Lerneinheiten. Diese Seite fasst das Wichtigste zusammen. Was ist eine Transition? Eine Transition animiert den Wechsel einer CSS-Eigenschaft von einem Zustand in einen anderen. Sie benötigt immer einen text/html 2026-05-31T21:21:16+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.bzz.ch/de/modul/m291/learningunits/lu13/theorie/b_nesting?rev=1780262476&do=diff LU13b - CSS Nesting Seit 2023 unterstützen alle modernen Browser natives CSS Nesting. Sie können Regeln direkt ineinander verschachteln, was den Code lesbarer und wartbarer macht. Das Problem ohne Nesting Ohne Nesting muss jede Regel den vollständigen Selektor wiederholen: text/html 2026-05-31T22:22:15+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.bzz.ch/de/modul/m291/learningunits/lu13/theorie/c_keyframes?rev=1780266135&do=diff LU13c - CSS Keyframe-Animationen [ Keyframe Animationen] Im Gegensatz zu Transitions laufen Keyframe-Animationen eigenständig – sie benötigen keinen Auslöser wie einen Klick oder Hover. Sie eignen sich für Ladeanimationen, Einblend-Effekte beim Seitenaufruf und dekorative Bewegungen. text/html 2026-05-31T21:25:15+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.bzz.ch/de/modul/m291/learningunits/lu13/theorie/d_transforms?rev=1780262715&do=diff LU13d - CSS Transforms Transforms sind geometrische Operationen, die das Aussehen eines Elements verändern, ohne den Dokumentfluss zu beeinflussen – andere Elemente rücken nicht nach. Sie werden sehr häufig innerhalb von @keyframes und Transitions eingesetzt. text/html 2026-05-31T21:29:44+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.bzz.ch/de/modul/m291/learningunits/lu13/theorie/e_staggered_animations?rev=1780262984&do=diff LU13e - Gestaffelte Animationen mit CSS-Variablen Wenn mehrere gleichartige Elemente (z. B. Kacheln in einem Raster) nacheinander eingeblendet werden sollen, spricht man von einem Treppeneffekt. Mit CSS-Custom-Properties lässt sich dieser Effekt vollständig in text/html 2026-05-31T22:21:38+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.bzz.ch/de/modul/m291/learningunits/lu13/theorie/f_animation_timeline?rev=1780266098&do=diff LU13f - Scroll-gesteuerte Animationen [ Gif: Scroll Animation] Mit animation-timeline: view() wird der Fortschritt einer Animation nicht durch Zeit gesteuert, sondern durch die Position des Elements im Viewport. Das Element animiert herein, wenn es beim Scrollen sichtbar wird – ganz ohne JavaScript.