TOP 22 CSS Page Transitions

TRANSFORM: TRANSLATE

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

JUST ANOTHER CSS UI

Just another CSS UI with page transition.

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

MULTI LAYER PAGE REVEAL EFFECT

Multi layer page reveal effect in HTML, CSS and JavaScript.

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

TILES PAGE TRANSITION

Tiles page transition in HTML and CSS.

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

ARTICLE TRANSITION PAGE

Article transition page in HTML, CSS and JS.

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

PAGE TRANSITION

Simple page transition.

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

Fullscreen Layout Page Transitions

Page transitions with HTML, CSS and JavaScript.

See the Pen Fullscreen Layout Page Transitions – Pure JS/CSS by Marcelo Ribeiro (@marcelo-ribeiro) on CodePen.

[su_button url=”https://codepen.io/marcelo-ribeiro/pen/xOOKpO ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

React Animated Page Transitions

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

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

[su_button url=”https://codepen.io/sdras/pen/gWWQgb ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

REVEAL CONTENT ANIMATION

Reveal content animation and menu.

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

Transitions

Easy css page transitions.

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

[su_button url=”https://codepen.io/blossk/pen/dJAgb ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

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.

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

[su_button url=”https://codepen.io/rachsmith/pen/PWxoLN ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Cubic Bezier Page Transition

GSAP Cubic bezier page transition.

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

[su_button url=”https://codepen.io/Polenji86/pen/KNabaJ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

SIMPLE CSS3 PAGE TRANSITION

A simple and performant CSS3 page transition.

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

Vue2 Page Transitions With GSAP

Some default Vue2 page transitions.

See the Pen Vue2 page transitions with GSAP by Tim Rijkse (@timrijkse) on CodePen.

[su_button url=”https://codepen.io/timrijkse/pen/ALgZpp ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

PAGE TRANSITION

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

See the Pen Thumbnail to fullscreen page transition by Steve Gardner (@ste-vg) on CodePen.

Easy CSS Page/Slide Transitions

Super easy slider/page transitions.

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

[su_button url=”https://codepen.io/jcoulterdesign/pen/EPNrzg ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Page Transition With Loader

Page transition with loader in HTML, CSS and JavaScript.

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

[su_button url=”https://codepen.io/johnheiner/pen/JdRybK ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Page Transitions

Page transitions with HTML, CSS and JavaScript.

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

[su_button url=”https://codepen.io/romswellparian/pen/vEvVjW ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Page Transition Loader

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

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

[su_button url=”https://codepen.io/ARS/pen/wavXgQ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

SVG Path Pagination And Rotating Page Transition

Have a lot of hardcoded numbers. Under any circumstances don’t look into js section.

See the Pen Svg path pagination and rotating page transition by Nikolay Talanov (@suez) on CodePen.

[su_button url=”https://codepen.io/suez/pen/pvPVpj ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Material Design Transition

Click any link in this block of text to load another set of text. The links don’t go anywhere yet. They are just hooks to allow you to click somewhere.

The style and animation is entirely CSS so it is smooth. JavaScript is used to add classes at the right time. It also pauses to wait for the content to be replaced, and calculates where to centre the hole. There are two stages to the animation. When a link is clicked the border-width grows very large.

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

[su_button url=”https://codepen.io/djmarland/pen/CxEbK ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Kontext

A context-shift transition inspired by iOS.

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

[su_button url=”https://codepen.io/hakimel/pen/FAiKv ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]