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.

1. Just Another CSS UI

CSS Page Transitions - Just another CSS UI
Author: Jamie Coulter (jcoulterdesign)
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)
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)
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)
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)
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)
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)

CSS Page Transitions - Tiles Page Transition (CSS)
Author: Milan Ricoul (firestar300)
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)
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)
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)
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)
Created on: May 1, 2017
Made with: HTML, SCSS, Babel
Tags: react, react transition, page, transitions, greensock

12. Transitions

CSS Page Transitions - transitions
easy css page transitions
Author: Filipp (blossk)
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)
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)
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)
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)
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)
Created on: May 21, 2015
Made with: HTML, SCSS, JS

18. 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)
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)
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)
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)
Created on: October 19, 2014
Made with: HTML, CSS, JS

22. Kontext

CSS Page Transitions - Kontext
A context-shift transition inspired by iOS.
Author: Hakim El Hattab (hakimel)
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)
Created on: April 8, 2015
Made with: HTML, CSS, JS
Tags: css, menu, navigation, one-page

24. 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)
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)
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)
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)
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)
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)
Created on: March 19, 2015
Made with: HTML, SCSS, JS
Tags: slider, drag-slider, parallax, svg overlay

30. Lollipop Transition

CSS Page Transitions - Lollipop Transition
An attempt at the app drawer/folder animations featured in Android 5.0 lollipop
Author: Jeff McCarthy (jeffmccarthyesq)
Created on: November 22, 2014
Made with: Haml, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml

31. Skewed One Page Scroll

CSS Page Transitions - Skewed One Page Scroll
Author: Nikolay Talanov (suez)
Created on: November 4, 2015
Made with: HTML, SCSS, JS

32. 3D Page Transition Effect

CSS Page Transitions - 3D Page Transition Effect
Author: Wong Lok (wonglok)
Created on: May 21, 2014
Made with: HTML, SCSS, JS