CSS Animationen bei Seitenwechsel ohne JavaScript

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.

@view-transition {<br>	navigation: auto;<br>}<br><br>@keyframes move-out {<br>  from {<br>    transform: translateX(0%);<br>  }<br><br>  to {<br>    transform: translateX(100%);<br>  }<br>}<br><br>@keyframes move-in {<br>  from {<br>    transform: translateX(-100%);<br>  }<br><br>  to {<br>    transform: translateX(0%);<br>  }<br>}<br><br>::view-transition-old(root) {<br>  animation: 0.4s ease-in both move-out;<br>}<br><br>::view-transition-new(root) {<br>  animation: 0.4s ease-in both move-in;<br>}<br>

Das könnte auch interessant sein:

In diesem Tutorial, wird ein einfaches Webquiz mit HTML, CSS und JavaScript programmiert.

Webquiz

Einfügen

Werbung (Affiliate - ich bekomme eine kleine Provision, dein Preis ändert sich nicht)