CSS Transitions & JavaScript for Animated Entry Effects

Recently, I was super excited by this question asked in Stack Overflow: CSS Transition Width Right to Left. The challenge was to create a simple effect like:

I had to use a simple overflow: hidden and keep the container in an inline-block display and make it relatively positioned so that it can accommodate absolutely only to the size of the contents.

Having said that, using a mask on top and making it reduce the width to nothing was my first trial and it didn't work because of the CSS dynamic calculation like % and auto do not work with animations.

So assuming a full right value of 100%, I made this hover code, which worked perfectly just with CSS.

h1 {  
  overflow: hidden;
  display: inline-block;
  position: relative;
}
h1 .mask {  
  position: absolute;
  transition: all 0.5s linear;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
h1.active .mask {  
  right: 100%;
}

So to add it when we load, I just made a simple JavaScript snippet that just adds the class when the document is loaded. I have used vanilla JavaScript here to keep the code footprint smaller:

window.onload = function () {  
  document.querySelector("h1").classList.add("active");
};

And finally with our ever simple HTML, we have the complete output:

<h1><span class="mask"></span>Welcome</h1>  

Output

See the Pen BZrvML by Praveen Kumar (@praveenscience) on CodePen.