35+ Cool CSS Page Transitions (Free Code + Demos)

Enjoy this 100% free and open source collection of HTML and CSS page transition effect code examples. These transition effects will totally impress your users.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥

👉 Click to visit: ApplyFox.ai

1. Just Another CSS UI

CSS Page Transitions - Just another CSS UI

Author: Jamie Coulter (jcoulterdesign)

Links: Source Code / Demo

Created on: June 12, 2019

Made with: Haml, SCSS, Babel

CSS Pre-processor: SCSS

JS Pre-processor: Babel

HTML Pre-processor: Haml

2. Article Transition Page

CSS Page Transitions - Article transition page

Inspired by a web page design by ReAlign 2 on the Dribbble website using css animations.

Author: Muna (Munamohamed94)

Links: Source Code / Demo

Created on: December 12, 2017

Made with: HTML, SCSS, JS

Tags: html, scss

3. Thumbnail To Fullscreen Page Transition

CSS Page Transitions - Thumbnail to fullscreen page transition

Seamless transition from thumbnail grid to fullscreen page. Using CSS animations and Angular 1.5.

Author: Steve Gardner (steveg3003)

Links: Source Code / Demo

Created on: August 1, 2016

Made with: HTML, Less, JS

Tags: gallery, page-transition, angular, animation, single-page

4. Dummy Multi Layer Page Reveal Effect

CSS Page Transitions - Dummy Multi Layer Page Reveal Effect

Author: Mehmet Burak Erman (mburakerman)

Links: Source Code / Demo

Created on: January 3, 2019

Made with: Pug, Stylus, JS

CSS Pre-processor: Stylus

JS Pre-processor: None

HTML Pre-processor: Pug

Tags: layer, page-reveal

5. Transform: Translate CSS Page Transition

CSS Page Transitions - Transform: Translate CSS Page Transition

Author: Cassandra Rossall (cassandraPaige)

Links: Source Code / Demo

Created on: December 12, 2019

Made with: HTML, CSS

6. Tiles Page Transition (CSS)

CSS Page Transitions - Tiles Page Transition (CSS)

Author: Milan Ricoul (firestar300)

Links: Source Code / Demo

Created on: July 18, 2018

Made with: Pug, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

7. Tiles Page Transition (CSS)

Author: Milan Ricoul (firestar300)

Links: Source Code / Demo

Created on: July 18, 2018

Made with: Pug, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

8. Simple CSS3 Page Transition

CSS Page Transitions - Simple CSS3 Page Transition

A simple and performant CSS3 page transition

Author: Paul DeCotiis (decotii)

Links: Source Code / Demo

Created on: January 14, 2017

Made with: HTML, Less, JS

Tags: css3, animations, transitions, html5, gradients

9. Reveal Content Animation (and Menu)

CSS Page Transitions - Reveal Content Animation (and Menu)

Author: Tobias Glaus (tobiasglaus)

Links: Source Code / Demo

Created on: March 31, 2017

Made with: HTML, SCSS, JS

10. Fullscreen Layout Page Transitions - Pure JS/CSS

CSS Page Transitions - Fullscreen Layout Page Transitions - Pure JS/CSS

Author: Marcelo Ribeiro (marcelo-ribeiro)

Links: Source Code / Demo

Created on: June 14, 2016

Made with: HTML, SCSS, JS

11. React Animated Page Transitions

CSS Page Transitions - React Animated Page Transitions

Just a small demo to show a few page transitions in React. Using GreenSock and SVG.

Author: Sarah Drasner (sdras)

Links: Source Code / Demo

Created on: May 1, 2017

Made with: HTML, SCSS, Babel

Tags: react, react transition, page, transitions, greensock

12. Transitions

easy css page transitions

Author: Filipp (blossk)

Links: Source Code / Demo

Created on: August 9, 2013

Made with: HTML, SCSS

Tags: css3, transitions, template, html5

13. Expanding Card Page Transition Effect

CSS Page Transitions - Expanding card page transition effect

That thing where the card expands into the background, no libraries, commented. Please note: this code is in no way ready to be used as is in production on your website. It will need to be adapted to be cross browser compliant & accessible. I just wanted to share how one might go about t...

Read More

Author: Rachel Smith (rachsmith)

Links: Source Code / Demo

Created on: February 10, 2017

Made with: HTML, CSS, JS

Tags: javascript, css, animation, ui

14. GSAP Cubic Bezier Page Transition

CSS Page Transitions - GSAP Cubic bezier page transition

Author: Maciej Siwanowicz (Polenji86)

Links: Source Code / Demo

Created on: November 20, 2016

Made with: Pug, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

15. Vue2 Page Transitions With GSAP

CSS Page Transitions - Vue2 page transitions with GSAP

Some default Vue2 page transitions, Feel free to use them in your own projects. Suggestions are welcome! :) http://twitter.com/timrijkse

Author: Tim Rijkse (timrijkse)

Links: Source Code / Demo

Created on: October 15, 2016

Made with: HTML, SCSS, Babel

Tags: gsap, vue, vuejs, greensock, transition

16. Easy CSS Page/Slide Transitions

CSS Page Transitions - Easy CSS Page/Slide Transitions

Author: Jamie Coulter (jcoulterdesign)

Links: Source Code / Demo

Created on: December 30, 2015

Made with: Haml, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Haml

Tags: transitions, ui, animations, slides, ux

17. Page Transition With Loader

CSS Page Transitions - Page Transition with Loader

Author: John Heiner (johnheiner)

Links: Source Code / Demo

Created on: May 21, 2015

Made with: HTML, SCSS, JS

18. React Animated Page Transitions

Just a small demo to show a few page transitions in React. Using GreenSock and SVG.

Author: Sarah Drasner (sdras)

Links: Source Code / Demo

Created on: May 1, 2017

Made with: HTML, SCSS, Babel

Tags: react, react transition, page, transitions, greensock

19. Page Transition Loader

CSS Page Transitions - Page Transition Loader

New page preloader concept. SVG circle loader with morphing effect. Responsive animated wireframe.

Author: Arsen Zbidniakov (ARS)

Links: Source Code / Demo

Created on: April 23, 2015

Made with: HTML, SCSS, JS

Tags: preloader, page, transition, circle, wireframe

20. Svg Path Pagination And Rotating Page Transition

CSS Page Transitions - Svg path pagination and rotating page transition

Path animation lags in IE. Have a lot of hardcoded numbers. Under any circumstances don't look into js section.

Author: Nikolay Talanov (suez)

Links: Source Code / Demo

Created on: January 20, 2015

Made with: HTML, SCSS, JS

Tags: layout, one-page-scroll, svg, svg-path, pagination

21. Material Design Transition

CSS Page Transitions - Material design transition

Author: David Marland (djmarland)

Links: Source Code / Demo

Created on: October 19, 2014

Made with: HTML, CSS, JS

22. Kontext

A context-shift transition inspired by iOS.

Author: Hakim El Hattab (hakimel)

Links: Source Code / Demo

Created on: February 26, 2013

Made with: HTML, CSS, JS

Tags: css-animation, css-3d-transform, javascript

23. One Page Navigation CSS Menu

CSS Page Transitions - One Page Navigation CSS Menu

This is a one page navigation with diferent sections and a pure CSS menu and transitions.

Author: Alberto Hartzet (hrtzt)

Links: Source Code / Demo

Created on: April 8, 2015

Made with: HTML, CSS, JS

Tags: css, menu, navigation, one-page

24. Svg Path Pagination And Rotating Page Transition

Path animation lags in IE. Have a lot of hardcoded numbers. Under any circumstances don't look into js section.

Author: Nikolay Talanov (suez)

Links: Source Code / Demo

Created on: January 20, 2015

Made with: HTML, SCSS, JS

Tags: layout, one-page-scroll, svg, svg-path, pagination

25. Pure CSS One Page Vertical Navigation

CSS Page Transitions - Pure CSS One page vertical navigation

One of the classic layouts used on onepage

Author: Alberto Hartzet (hrtzt)

Links: Source Code / Demo

Created on: February 22, 2016

Made with: Pug, Sass, JS

CSS Pre-processor: Sass

JS Pre-processor: None

HTML Pre-processor: Pug

Tags: one-page, css-only, pure-css, vertical-navigation, one-page-scroll

26. CSS Page Transitions

CSS Page Transitions - CSS Page Transitions

from: http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ https://github.com/codrops/PageTransitions

Author: brandonjp (brandonjp)

Links: Source Code / Demo

Created on: June 10, 2013

Made with: HTML, CSS, JS

27. Page Layout Transitions With Pure CSS

CSS Page Transitions - Page Layout transitions with Pure CSS

Author: SitePoint (SitePoint)

Links: Source Code / Demo

Created on: August 6, 2014

Made with: HTML, SCSS, JS

28. Responsive Bodymovin Modal / Page Transition

CSS Page Transitions - Responsive bodymovin modal / page transition

Make a bodymovin animation responsive to its container (in this case the viewport) by setting the BodyMovin rendererSettings to preserveAspectRatio: 'none'.

Author: Jonas Sandstedt (sandstedt)

Links: Source Code / Demo

Created on: July 13, 2016

Made with: HTML, SCSS, JS

Tags: bodymovin, animation, preserveaspectratio, page-transition, modal

29. Fullscreen Drag-slider With Parallax

CSS Page Transitions - Fullscreen drag-slider with parallax

Sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine. Source of inspiration - https://stupid-studio.com/ (their js is minified, so all code is mine, except some parts of svg, like viewBox/minHeight).

Author: Nikolay Talanov (suez)

Links: Source Code / Demo

Created on: March 19, 2015

Made with: HTML, SCSS, JS

Tags: slider, drag-slider, parallax, svg overlay