CSS Reveal Text Effect - Animation Idea #6

In this example - I thought it might be neat to create some sort of animated revelation of text.

/* Text Reveal */

/* This CSS goes in the Branding and Look Section */
#mask {
  width: 500px;
  height: 50px;
  background-color: black;
  transform-origin: 100% 0%;
  animation-name: reveal;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes reveal {
  100% {transform: translateX(500px);}
  100% {width: 5px;}
}

Here is what I did with the HTML

<!-- This is the HTML code for your widget -->

<div style="background-color:#000000; font-family: 'Courier New'; color:#00ff00; height:100px; padding:10px; font-size:24px;">

This is revealed text.

</div>

<div id="mask" style="position: absolute; left: 0px; top: 0px;">
</div>

Please share all the ideas you might have for an effect such as this one.

All you have to do is tweak the settings to make it fit your own projects or theme.