Enhance the transition with blur filter

The transition works well, But it is a little bit dull. We can slightly enhance the transition by adding subtle changes to the root page. The following GIF indicates the changes.

The root page — blue one — stay at the same place. But in order to enhance the depth of layers, that feeling of we temporary put one more screen on top, we scale the page a little bit smaller to make room for the about page.

Not much changes for this effect.

First, we need a scale small and revert animation. (Note that how I am defining a generic animation before defile which element to apply it?)

So we have the following movetoback and movetofront keyframes. The scaling shouldn’t be much because we want to preserve the feeling that the root page is still there. 90% or even 95% scale works fine.

@-webkit-keyframes movetoback {
  from {-webkit-transform: scale3d(1.0, 1.0, 1.0);}
  to { -webkit-transform: scale3d(0.9, 0.9, 1.0);}
}
@-webkit-keyframes movetofront {
    from { -webkit-transform: scale3d(0.9, 0.9, 1.0);}
    to { -webkit-transform: scale3d(1.0, 1.0, 1.0);}
}

Next, we apply the keyframes to the .out and .in.reverse.

 .customslide.out {
   -webkit-animation-name: movetoback;
   -moz-animation-name: movetoback;
   animation-name: movetoback;
 }
 .customslide.in.reverse {
   -webkit-animation-name: movetofront;
   -moz-animation-name: movetofront;
   animation-name: movetofront;
}

What’s more? we can add a blur effect to the root page while it moves to back. It uses the -webkit-filter property with blur function.

@-webkit-keyframes movetoback {
    from {-webkit-transform: scale3d(1.0, 1.0, 1.0); -webkit-filter: blur(0);}
    to { -webkit-transform: scale3d(0.9, 0.9, 1.0); -webkit-filter: blur(15px);}
}
@-webkit-keyframes movetofront {
  from { -webkit-transform: scale3d(0.9, 0.9, 1.0); -webkit-filter: blur(15px);}
  to { -webkit-transform: scale3d(1.0, 1.0, 1.0); -webkit-filter: blur(0);}
}

Now you can check the new blur transition result in the following link. There are two versions, with and without the touchstart/end patching, for you to compare the differences on feeling.

• Blur Transition without Touch event patching
• Blur Transition with Touch event patching

Want to check more detail on available filters? Check this CSS filters playground.

What’s next? We’re going to take a look at “Exercises”.