35+ CSS Page Transitions

Are you wandering all over the internet to add interactive page transitions to your UI components? Your quest ends here. In this compilation, we are featuring 35+ top HTML and CSS page transition code examples that will mesmerise your site visitors. We have curated these page transition effects from various sources, including CodePen and GitHub, enhancing the visual interest of your web project.

Whether you’re a web designer, web developer, user experience designer, These captivating transition effects add personality and give a soothing experience to your visitors. Each item is collected with utmost care, working easily on every modern browser. Explore boundless customisation options to uplift your website’s interactivity.

Let’s explore our free CSS page translation compilation and make your web project stand out.

1. One Page Scroll with Depth Effect

See the Pen <a href="https://codepen.io/suez/pen/JoWKKX"> One page scroll with depth effect (?)</a> by Nikolay Talanov (<a href="https://codepen.io/suez">@suez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikolay Talanov
Source: Code / Demo
Created on: NOVEMBER 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Folio Transition

See the Pen <a href="https://codepen.io/foliodot/pen/MKNeKB"> folio.transitions</a> by Foliodot (<a href="https://codepen.io/foliodot">@foliodot</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Foliodot
Source: Code / Demo
Created on: OCTOBER 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

3. Tiles Page Transition (CSS)

See the Pen <a href="https://codepen.io/mitori/pen/zLKZVZ"> Tiles Page Transition (CSS)</a> by Milan Ricoul (<a href="https://codepen.io/mitori">@mitori</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Milan Ricoul
Source: Code / Demo
Created on: JULY 19, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

4. Simple CSS3 Page Transition

See the Pen <a href="https://codepen.io/decotii/pen/RKGNJa"> Simple CSS3 Page Transition</a> by Paul DeCotiis (<a href="https://codepen.io/decotii">@decotii</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paul DeCotiis
Source: Code / Demo
Created on: NOVEMBER 07, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

5. Pagination & Layout with Clipped Background Transition

See the Pen <a href="https://codepen.io/alvarotrigo/pen/vYpwvpJ"> Pagination & layout with clipped background div’s</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: APRIL 26, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. Dummy Multi Layer Page Reveal Effect

See the Pen <a href="https://codepen.io/mburakerman/pen/roJmaZ"> Dummy Multi Layer Page Reveal Effect</a> by Mehmet Burak Erman (<a href="https://codepen.io/mburakerman">@mburakerman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mehmet Burak Erman
Source: Code / Demo
Created on: JANUARY 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript

7. Thumbnail to Full Screen Page Transition

See the Pen <a href="https://codepen.io/alvarotrigo/pen/YzYbdxV"> Thumbnail to fullscreen page transition</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: APRIL 25, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. transform: translate

See the Pen <a href="https://codepen.io/cassandraPaige/pen/MWYeqwZ"> transform: translate</a> by Cassandra Rossall (<a href="https://codepen.io/cassandraPaige">@cassandraPaige</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cassandra Rossall
Source: Code / Demo
Created on: DECEMBER 13, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Article Transition Page

See the Pen <a href="https://codepen.io/Munamohamed94/pen/aEbaKN"> Article transition page</a> by Muna (<a href="https://codepen.io/Munamohamed94">@Munamohamed94</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Muna
Source: Code / Demo
Created on: APRIL 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

10. Kontext

See the Pen <a href="https://codepen.io/hakimel/pen/kxVKgJ"> Kontext</a> by Hakim El Hattab (<a href="https://codepen.io/hakimel">@hakimel</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hakim El Hattab
Source: Code / Demo
Created on: FEBRUARY 27, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

11. Material design transition

See the Pen <a href="https://codepen.io/djmarland/pen/NWVWRR"> Material design transition</a> by David Marland (<a href="https://codepen.io/djmarland">@djmarland</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David Marland
Source: Code / Demo
Created on: OCTOBER 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

12. GSAP Cubic Bezier Page Transition

See the Pen <a href="https://codepen.io/Polenji86/pen/KNabaJ"> GSAP Cubic bezier page transition</a> by Maciej Siwanowicz (<a href="https://codepen.io/Polenji86">@Polenji86</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maciej Siwanowicz
Source: Code / Demo
Created on: FEBRUARY 02, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. Transitions

See the Pen <a href="https://codepen.io/blossk/pen/AwPaBV"> transitions</a> by Filipp (<a href="https://codepen.io/blossk">@blossk</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Filipp
Source: Code / Demo
Created on: AUGUST 9, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. Lollipop Transition

See the Pen <a href="https://codepen.io/alvarotrigo/pen/ZEvNVvg"> Lollipop Transition</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: APRIL 25, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. 3D Page Flip

See the Pen <a href="https://codepen.io/robbue/pen/PomPZo"> 3D page flip</a> by Robert Bue (<a href="https://codepen.io/robbue">@robbue</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Robert Bue
Source: Code / Demo
Created on: JUNE 04, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Responsive Body Moving Modal / Page Transition

See the Pen <a href="https://codepen.io/sandstedt/pen/vKWzWE"> Responsive bodymovin modal / page transition</a> by Jonas Sandstedt (<a href="https://codepen.io/sandstedt">@sandstedt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jonas Sandstedt
Source: Code / Demo
Created on: DECEMBER 17, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

17. Page Transitions

See the Pen <a href="https://codepen.io/romswellparian/pen/vEvVjW"> Page Transitions</a> by Romswell Roswell Parian Paucar (<a href="https://codepen.io/romswellparian">@romswellparian</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Romswell Roswell Parian Paucar
Source: Code / Demo
Created on: MARCH 22, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

18. Just another CSS UI

See the Pen <a href="https://codepen.io/jcoulterdesign/pen/vqOyLr"> Just another CSS UI</a> by Jamie Coulter (<a href="https://codepen.io/jcoulterdesign">@jcoulterdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jamie Coulter
Source: Code / Demo
Created on: DECEMBER 06, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Page Transitions with Barba.js & GSAP

See the Pen <a href="https://codepen.io/naseemshah/pen/KKpeOpy"> Page Transitions with Barba.js & GSAP</a> by Naseem Shah (<a href="https://codepen.io/naseemshah">@naseemshah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Naseem Shah
Source: Code / Demo
Created on: MARCH 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

20. Skewed One Page Scroll

See the Pen <a href="https://codepen.io/suez/pen/gadLre"> Skewed One Page Scroll</a> by Nikolay Talanov (<a href="https://codepen.io/suez">@suez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikolay Talanoy
Source: Code / Demo
Created on: NOVEMBER 05, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

21. Fullscreen Layout Page Transitions

See the Pen <a href="https://codepen.io/alvarotrigo/pen/OJzYrQZ"> Fullscreen Layout Page Transitions – Pure JS/CSS</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: APRIL 25, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, , JavaScript

22. Page Transition Loader

See the Pen <a href="https://codepen.io/ARS/pen/wavXgQ"> Page Transition Loader</a> by Arsen Zbidniakov (<a href="https://codepen.io/ARS">@ARS</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arsen Zbidniakov
Source: Code / Demo
Created on: APRIL 27, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Pure CSS One page vertical navigation

See the Pen <a href="https://codepen.io/hrtzt/pen/pgXMYb"> Pure CSS One page vertical navigation</a> by Hrtzt (<a href="https://codepen.io/hrtzt">@hrtzt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hrtzt
Source: Code / Demo
Created on: FEBRUARY 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass)

24. Simple Page Transition

See the Pen <a href="https://codepen.io/ktsn/pen/wrxymV"> Simple Page Transition</a> by ktsn (<a href="https://codepen.io/ktsn">@ktsn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ktsn
Source: Code / Demo
Created on: OCTOBER 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

25. Expanding Card Page Transition Effect

See the Pen <a href="https://codepen.io/rachsmith/pen/PWxoLN"> Expanding card page transition effect</a> by Rachel Smith (<a href="https://codepen.io/rachsmith">@rachsmith</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rachel Smith
Source: Code / Demo
Created on: FEBRUARY 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

26. Page Layout transitions with Pure CSS

See the Pen <a href="https://codepen.io/SitePoint/pen/KKoRKb"> Page Layout transitions with Pure CSS</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: SitePoint
Source: Code / Demo
Created on: AUGUST 6, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. Vue2 page transitions with GSAP

See the Pen <a href="https://codepen.io/iamrubberducky/pen/rMrXWW"> Vue2 page transitions with GSAP</a> by Rubber Ducky (<a href="https://codepen.io/iamrubberducky">@iamrubberducky</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rubber Ducky
Source: Code / Demo
Created on: OCTOBER 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

28. One Page Navigation CSS Menu

See the Pen <a href="https://codepen.io/hrtzt/pen/NPZKRN"> One Page Navigation CSS Menu</a> by Hrtzt (<a href="https://codepen.io/hrtzt">@hrtzt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hrtzt
Source: Code / Demo
Created on: APRIL 9, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. Page Transitions

30. Page Transition with Loader

See the Pen <a href="https://codepen.io/johnheiner/pen/JdRybK"> Page Transition with Loader</a> by John Heiner (<a href="https://codepen.io/johnheiner">@johnheiner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: John Heiner
Source: Code / Demo
Created on: JUNE 12, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

31. CSS Page Transitions

See the Pen <a href="https://codepen.io/brandonjp/pen/kBWevV"> CSS Page Transitions</a> by brandonjp (<a href="https://codepen.io/brandonjp">@brandonjp</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: brandonjp
Source: Code / Demo
Created on: JUNE 10, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

32. Cool Layout with Fancy Page Transition

See the Pen <a href="https://codepen.io/alvarotrigo/pen/rNpgopN"> Cool layout with fancy page transitions and off-canvas menu</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: APRIL 25, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

33. Reveal Content Animation

See the Pen <a href="https://codepen.io/tobiasglaus/pen/oZJdZY"> Reveal content animation (and menu)</a> by Tobias Glaus (<a href="https://codepen.io/tobiasglaus">@tobiasglaus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: TOBIAS GLAUS
Source: Code / Demo
Created on: DECEMBER 03, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

34. React Animated Page Transitions

See the Pen <a href="https://codepen.io/sdras/pen/gWWQgb"> React Animated Page Transitions</a> by Sarah Drasner (<a href="https://codepen.io/sdras">@sdras</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sarah Drasner
Source: Code / Demo
Created on: MAY 1, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

35. Page Transition CSS3

See the Pen <a href="https://codepen.io/Podgro/pen/zvvzeM"> Page transition CSS3</a> by TOMAZKI (<a href="https://codepen.io/Podgro">@Podgro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: TOMAZKI
Source: Code / Demo
Created on: SEPTEMBER 11, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

36. Simple Page Transition

See the Pen <a href="https://codepen.io/ktsn/pen/wrxymV"> Simple Page Transition</a> by ktsn (<a href="https://codepen.io/ktsn">@ktsn</a>) on <a href="https://codepen.io">CodePen</a>. Author: ktsn
Source: Code / Demo
Created on: OCTOBER 20, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript