CSS Reveal Text Effect - Animation Idea #6

  • 28 January 2022
  • 0 replies
  • 673 views

Userlevel 7
Badge +6

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

CSS Reveal Text Effect
/* 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.


0 replies

Be the first to reply!

Reply