Website Page Transitions mit 2 Zeilen CSS Code

Level:
Einfach 👌
Ergebnis anschauen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link

In diesem Webflow Tutorial geht es um das Thema Page Transitions. Page Transitions können einer Webseite ein App-Feeling verleihen und sind einfach zu implementieren. Es wird gezeigt, wie man Cross-document view transitions verwenden kann, die momentan von Chromium Browsern unterstützt werden. Es wird betont, dass CSS-Animationen verwendet werden, um die Page Transitions umzusetzen, und dass die Seite auch ohne Unterstützung der Animationen weiterhin funktioniert. Es wird ein Beispielprojekt gezeigt, bei dem verschiedene Elemente wie Navigation, Bilder und Überschriften animiert werden. Es wird auch gezeigt, dass die Animationen mit CMS-Inhalten funktionieren.

View Transitions Chrome Dokumentation:
https://developer.chrome.com/docs/web-platform/view-transitions

Browser Support:
https://caniuse.com/?search=view-transition