Get a free website when you sign up for The No Fuss Package.

WordPress Page Transition Tutorial

Home WordPress WordPress Page Transition Tutorial

March 2, 2022

In this video I will show you how I like to add page transitions to a WordPress website. This will be a more advanced tutorial as it will require custom coding. I won’t be using any page transition plugins as I find them very limiting when it comes to customization and performance.

The method I will be using is 100% CSS code so there won’t be any extra JavaScript bloat to your website.

Code Snippets Plugin:


  • 0:00 Introduction
  • 1:50 Global Page Transitions
  • 11:35 Target Certain Pages

Global Page Transitions Code:

					add_action('wp_body_open', 'add_code_on_body_open');
function add_code_on_body_open() {
    if ( is_single() || is_page() || is_front_page() || is_home() ) {
        echo '
    display: block;
    background: #5D9CC5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 9999;
    animation: loading 1.5s normal;}

#wickylogo {
 	animation: fadeOut 1s ease-in-out;
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
#wickylogo img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
	transform: translate(-50%, -50%);
@keyframes loading {
    0% {
        height: 100%
    60% {
        height: 100%
    100% {
        height: 0%;
@keyframes fadeOut {
    30% {opacity: 1;}
    100% {opacity: 0;}
/* Small devices (mobile/tablets, 767px and below) */
@media only screen and (max-width: 766px) {
	#wickylogo img{width: 75%;}

<div class="page-transition">
<div id="wickylogo">
     <img decoding="async" src="image.svg" alt="alt text here">

Target Certain Pages Code:

					if ( is_page( array('services','resources','contact','about','portfolio')) ) { // for specific page

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources