40+ CSS Page Transitions

Last Updated on by in CSS Examples
CSs transition Effect

Do you want to display amazing transition effects on your website? But if you don’t know how to code it, don’t worry. Check out our best collection of free HTML, CSS, and JavaScript CSS page transition effects and bring your dull web page to life, sourced from reputed platforms like GitHub and CodePen.

In 2024, we have added the 20 newest Page Transitions to our collection to keep you updated about the latest trends.

CSS page transitions enhance web navigation by creating smooth, visually appealing shifts between sections or pages using CSS animations. They elevate the user experience, making navigation feel fluid and engaging. Our collection features a wide range of page transition effects, including transition types like fade, slide, zoom, rotate, grow, shrink, and blur.

In this curated collection, we will demonstrate a mix of pure CSS page transitions and some with a small touch of JavaScript to create some stunning effects and visual interest and improve the user experience when navigating between different parts of a website.

Whether you want to animate the full page, header, main content, or content cards, these effects engage users, fostering high user engagement and immersive browsing. Experience smooth page transitions that ensure fluid navigation, keeping users engaged and eager to explore, resulting in a dynamic and enthralling browsing journey.

Explore our CSS page transition collection to enhance user engagement, improve the user experience, enhance visual appeal, fortify brand identity, and elevate user interaction.

01. Thumbnail to Full Screen Page Transition

See the Pen
Thumbnail to fullscreen page transition
by Álvaro (@alvarotrigo)
on CodePen.


Author: Álvaro, @alvarotrigo
Links: Source Code / Demo
Created on: April 25, 2022
Made with: HTML, CSS, JS

02. Lollipop Transition

See the Pen
Lollipop Transition
by Álvaro (@alvarotrigo)
on CodePen.


Author: Álvaro, @alvarotrigo
Links: Source Code / Demo
Created on: April 25, 2022
Made with: HTML, CSS, JS

03. Just another CSS UI

See the Pen
Just another CSS UI
by Jamie Coulter (@jcoulterdesign)
on CodePen.

Author: Jamie Coulter, @jcoulterdesign
Links: Source Code / Demo
Created on: December 06, 2019
Made with: HTML, CSS

04. Page Transition Loader

See the Pen
Page Transition Loader
by Arsen Zbidniakov (@ARS)
on CodePen.

Author: Arsen Zbidniakov, @ARS
Links: Source Code / Demo
Created on: April 27, 2015
Made with: HTML, CSS

05. Page Transition with Loader

See the Pen
Page Transition with Loader
by John Heiner (@johnheiner)
on CodePen.

Author: John Heiner, @johnheiner
Links: Source Code / Demo
Created on: June 12, 2015
Made with: HTML, CSS ,JS

06. Page Transition CSS3

See the Pen
Page transition CSS3
by TOMAZKI (@Podgro)
on CodePen.

Author: TOMAZKI, @Podgro
Links: Source Code / Demo
Created on: September 11, 2015
Made with: HTML, CSS, JS

07. Expanding Card Page Transition Effect

See the Pen
Expanding card page transition effect
by Rachel Smith (@rachsmith)
on CodePen.


Author: Rachel Smith, @rachsmith
Links: Source Code / Demo
Created on: February 10, 2017
Made with: HTML, CSS, JS

08. Skewed One Page Scroll

See the Pen
Skewed One Page Scroll
by Nikolay Talanov (@suez)
on CodePen.

Author: Nikolay Talanov, @suez
Links: Source Code / Demo
Created on: November 05, 2015
Made with: HTML, CSS, JS

09. Folio Transition

See the Pen
folio.transitions
by Foliodot (@foliodot)
on CodePen.

Author: Foliodot, @foliodot
Links: Source Code / Demo
Created on: October 13, 2020
Made with: HTML, CSS, JS

10. Pagination & Layout with Clipped Background Transition

See the Pen
Pagination & layout with clipped background div’s
by Álvaro (@alvarotrigo)
on CodePen.


Author: Álvaro, @alvarotrigo
Links: Source Code / Demo
Created on: April 26, 2022
Made with: HTML, CSS, JS

11. Article Transition Page

See the Pen
Article transition page
by Muna (@Munamohamed94)
on CodePen.

Author: Muna, @Munamohamed94
Links: Source Code / Demo
Created on: April 18, 2018
Made with: HTML, CSS, JS

12. GSAP Cubic Bezier Page Transition

See the Pen
GSAP Cubic bezier page transition
by Maciej Siwanowicz (@Polenji86)
on CodePen.

Author: Maciej Siwanowicz, @Polenji86
Links: Source Code / Demo
Created on: February 02, 2017
Made with: HTML, CSS, JS

13. Responsive Body Moving Modal / Page Transition

See the Pen
Responsive bodymovin modal / page transition
by Jonas Sandstedt (@sandstedt)
on CodePen.

Author: Jonas Sandstedt, @sandstedt
Links: Source Code / Demo
Created on: December 17, 2016
Made with: HTML, CSS, JS

14. Fullscreen Layout Page Transitions

See the Pen
Fullscreen Layout Page Transitions – Pure JS/CSS
by Álvaro (@alvarotrigo)
on CodePen.

Author: Álvaro, @alvarotrigo
Links: Source Code / Demo
Created on: April 25, 2022
Made with: HTML, CSS, JS

15. Cool Layout with Fancy Page Transition

See the Pen
Cool layout with fancy page transitions and off-canvas menu
by Álvaro (@alvarotrigo)
on CodePen.

Author: Álvaro, @alvarotrigo
Links: Source Code / Demo
Created on: April 25, 2022
Made with: HTML, CSS, JS

16. Simple Page Transition

See the Pen
Simple Page Transition
by ktsn (@ktsn)
on CodePen.

Author: ktsn, @ktsn
Links: Source Code / Demo
Created on: October 20, 2017
Made with: HTML, CSS, JS

17. Reveal Content Animation

See the Pen
Reveal content animation (and menu)
by Tobias Glaus (@tobiasglaus)
on CodePen.

Author: TOBIAS GLAUS, @tobiasglaus
Links: Source Code / Demo
Created on: December 03, 2018
Made with: HTML, CSS, JS

18. Simple CSS3 Page Transition

See the Pen
Simple CSS3 Page Transition
by Paul DeCotiis (@decotii)
on CodePen.

Author: Paul DeCotiis, @decotii
Links: Source Code / Demo
Created on: November 07, 2017
Made with: HTML, CSS, JS

19. One Page Scroll with Depth Effect

See the Pen
One page scroll with depth effect (?)
by Nikolay Talanov (@suez)
on CodePen.


Author: Nikolay Talanov, @suez
Links: Source Code / Demo
Created on: November 13, 2015
Made with: HTML, CSS, JS

20. Kontext

See the Pen
Kontext
by Hakim El Hattab (@hakimel)
on CodePen.

Author: Hakim El Hattab, @hakimel
Links: Source Code / Demo
Created on: February 27, 2013
Made with: HTML, CSS, JS

21. 3D Page Flip

See the Pen
3D page flip
by Robert Bue (@robbue)
on CodePen.

Author: Robert Bue, @robbue
Links: Source Code / Demo
Created on: June 04, 2014
Made with: HTML, CSS, JS

22. Page Transitions with Barba.js & GSAP

See the Pen
Page Transitions with Barba.js & GSAP
by Naseem Shah (@naseemshah)
on CodePen.


Author: Naseem Shah @naseemshah
Links: Source Code / Demo
Created on: March 19, 2020
Made with: HTML, CSS, JS

23. Simple Page Transition

See the Pen
Simple Page Transition
by ktsn (@ktsn)
on CodePen.


Author: ktsn @ktsn
Links: Source Code / Demo
Created on: October 12, 2017
Made with: HTML(Pug), CSS(SCSS), JS

24. Vue2 page transitions with GSAP

See the Pen
Vue2 page transitions with GSAP
by Rubber Ducky (@iamrubberducky)
on CodePen.


Author: Rubber Ducky @iamrubberducky
Links: Source Code / Demo
Created on: October 15, 2016
Made with: HTML, CSS(SCSS), JS(Babel)

25. Page Transitions

See the Pen
Page Transitions
by Romswell Roswell Parian Paucar (@romswellparian)
on CodePen.


Author: Romswell Roswell Parian Paucar @romswellparian
Links: Source Code / Demo
Created on: March 22, 2015
Made with: HTML, CSS, JS

26. React Animated Page Transitions

See the Pen
React Animated Page Transitions
by Sarah Drasner (@sdras)
on CodePen.


Author: Sarah Drasner @sdras
Links: Source Code / Demo
Created on: May 1, 2017
Made with: HTML, CSS(SCSS), JS(Babel)

27. Tiles Page Transition (CSS)

See the Pen
Tiles Page Transition (CSS)
by Milan Ricoul (@mitori)
on CodePen.


Author: Milan Ricoul @mitori
Links: Source Code / Demo
Created on: July 19, 2018
Made with: HTML(Pug), CSS(SCSS), JS

28. Dummy Multi Layer Page Reveal Effect

See the Pen
Dummy Multi Layer Page Reveal Effect
by Mehmet Burak Erman (@mburakerman)
on CodePen.


Author: Mehmet Burak Erman @mburakerman
Links: Source Code / Demo
Created on: January 3, 2019
Made with: HTML(Pug), CSS(Stylus), JS

29. Material design transition

See the Pen
Material design transition
by David Marland (@djmarland)
on CodePen.


Author: David Marland @djmarland
Links: Source Code / Demo
Created on: October 19, 2014
Made with: HTML, CSS, JS

30. Transitions

See the Pen
transitions
by Filipp (@blossk)
on CodePen.


Author: Filipp @blossk
Links: Source Code / Demo
Created on: August 9, 2013
Made with: HTML, CSS(SCSS)

31. Page Transitions

See the Pen
Page Transitions
by Romswell Roswell Parian Paucar (@romswellparian)
on CodePen.


Author: Romswell Roswell Parian Paucar @romswellparian
Links: Source Code / Demo
Created on: March 22, 2015
Made with: HTML, CSS, JS

32. Pure CSS One page vertical navigation

,

See the Pen
Pure CSS One page vertical navigation
by Hrtzt (@hrtzt)
on CodePen.


Author: Hrtzt @hrtzt
Links: Source Code / Demo
Created on: February 23, 2016
Made with: HTML(Pug), CSS(Sass)

33. Page Layout transitions with Pure CSS

See the Pen
Page Layout transitions with Pure CSS
by SitePoint (@SitePoint)
on CodePen.


Author: SitePoint @SitePoint
Links: Source Code / Demo
Created on: August 6, 2014
Made with: HTML, CSS(SCSS)

34. One Page Navigation CSS Menu

See the Pen
One Page Navigation CSS Menu
by Hrtzt (@hrtzt)
on CodePen.


Author: Hrtzt @hrtzt
Links: Source Code / Demo
Created on: April 9, 2015
Made with: HTML, CSS

35. CSS Page Transitions

See the Pen
CSS Page Transitions
by brandonjp (@brandonjp)
on CodePen.


Author: brandonjp @brandonjp
Links: Source Code / Demo
Created on: June 10, 2013
Made with: HTML, CSS, JS

36. transform: translate

See the Pen
transform: translate
by Cassandra Rossall (@cassandraPaige)
on CodePen.


Author: Cassandra Rossall @cassandraPaige
Links: Source Code / Demo
Created on: December 13, 2019
Made with: HTML, CSS

37. 3D Page Transition Effect

See the Pen
3D Page Transition Effect
by Wong Lok (@wonglok)
on CodePen.


Author: Wong Lok @wonglok
Links: Source Code / Demo
Created on: May 21, 2014
Made with: HTML, CSS(SCSS)

38. Full Width Page Transitions

See the Pen
3D Page Transition Effect
by Wong Lok (@wonglok)
on CodePen.


Author: Josh Reynolds @joshuaaron
Links: Source Code / Demo
Created on: September 24, 2017
Made with: HTML(Pug), CSS(SCSS), JS(Babel)

39. Easy CSS Page/Slide Transitions

See the Pen
Easy CSS Page/Slide Transitions
by Jamie Coulter (@jcoulterdesign)
on CodePen.


Author: Jamie Coulter, @jcoulterdesign
Links: Source Code / Demo
Created on: December 31, 2015
Made with: HTML(Haml), CSS(SCSS), JS

40. Play with Header on Page Transitions

See the Pen
Play with Header on Page Transitions
by Paulina Hetman (@pehaa)
on CodePen.


Author: Paulina Hetman @pehaa
Links: Source Code / Demo
Created on: January 31, 2020
Made with: HTML, CSS(SCSS), JS(Babel)

41. Windows 8 Page Animation

See the Pen
Windows 8 Page Animation
by Jan Rubio (@janrubio)
on CodePen.


Author: Jan Rubio @janrubio
Links: Source Code / Demo
Created on: July 11, 2012
Made with: HTML(Haml), CSS(Less), JS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.