35+ CSS Page Transitions

Curated compilation of top 35+ HTML and CSS page transition code examples. Each item is 100% free, customizable, adds depth and dimension, and awestruck your site visitors.

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