Die Page Transition oder animierter Seitenübergang ist im professionellen Webdesign ein Webübergang zwischen zwei Seiten oder auch Ansichten. Ziel einer Page Transition ist es, den User zu den nächstfolgenden Inhalten zu leiten, ohne dass der Wechsel von einer Seite zur anderen zu schnell oder zu abrupt verläuft. Im schlechtesten Fall verliert der Nutzer nämlich die Orientierung und verlässt die Website womöglich. Aus diesem Grund nutzen Webentwickler die vielfältigen visuellen Möglichkeiten der Page Transition.
Die Page Transition über CSS ist ein animiertes Verfahren zwischen den Seiten, die der jeweiligen Website einen erstklassigen und professionellen Anstrich gibt und die Website besonders auszeichnet. Eine gute und originelle Page Transition bedeutet Lebendigkeit und kann die Navigation für den User erheblich erleichtern. Sie signalisiert Animationen und einen zwar eher unbeachteten, ja unbemerkten, aber dennoch zentralen Unterschied zwischen einer herausragenden und einer eher mittelmäßigen Website. Obwohl die Page Transition nicht zentral im Blickfeld steht und häufig im Webdesign übersehen wird, wissen wir heute, dass sie wirkt und den Look und die Usability einer Website maßgeblich prägen. Erst ihr kluger Einsatz vermittelt dem User ein echtes Surferlebnis.
Webentwickler, die heute noch glauben, dass die Page Transition Ressourcen fressende No-Gos sind und eine Website stark verlangsamen, wissen nicht, dass die jeweilige Animation nur richtig implementiert werden muss. Wenn dies beachtet wird, wirkt sie als enorm leistungsstarkes Tool kreativ und effizient und vermittelt einer Website einen besonderen USP. Wenn die Webseite allerdings schlechte Webübergänge bereithält, ist die Bounce Rate in der Regel recht hoch, weil Nutzer zu lange warten müssen, Informationen nicht finden oder auch schlichtweg keine Lust haben, sich schon wieder neu orientieren zu müssen.
Für eine Page Transition werden CSS, HTML und JavaScript einschließlich Klassen, Auswirkungen und unterschiedlichster Komponenten verwendet. Darüber hinaus finden aber besonders auch neuere, schneller responsive Websprachen bzw. Frameworks wie Vue.js, React und auch Angular dafür Verwendung. Sie versprechen in dem Zusammenhang eine fundamentale Verbesserung der UX und lassen den Benutzer wissen, dass ein neuer Abschnitt geladen wird.
Für eine gelungene Page Transition gibt es viele unterschiedliche Animationsmöglichkeiten, die Webentwickler nutzen, darunter:
- Folio Transition,
- Paginierung,
- Slider Transition,
- Lollipop-Übergang,
- Dummy Multi Layer Page Reveal Effect,
- Kachelseitenübergang,
- einfacher Seitenübergang,
- Page Transition Loader.