Animationen beim Seitenwechsel
Mit der CSS-Regel @view-transition lassen sich sehr einfach Animationen beim Seitenwechsel aufrufen, ganz ohne JavaScript!
In diesem kleinen Tutorial wollen wir den alten Seiteninhalt nach rechts raus laufen lassen und den neuen Inhalt von links nach rechts einlaufen lassen. Was früher ohne JavaScript nicht möglich war, geht jetzt mit einigen Zeilen CSS.
Dazu setzten wir in der CSS-Regel @view-transition die Eigenschaft navigation auf auto. Anschließend fügen wir 2 Animation hinzu "move-out" und "move-in".
Anschließend werden der alten und der neuen Seite die jeweiligen Animationen zugewiesen.
Das könnte auch interessant sein:
In diesem Tutorial, wird ein einfaches Webquiz mit HTML, CSS und JavaScript programmiert.
WebquizWerbung (Affiliate - ich bekomme eine kleine Provision, dein Preis ändert sich nicht)