CSS text filling animation

The text background is filled by an image with animations.

Github DOWNLOAD

Step1:
HTML
<h1>tag 

Step2:
CSS

The yellow frame can center everything inside.

And background is the smoke image. The main point is the way with background-clip which filling the text with it.

More about background-clip:

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

border-box

The background extends to the outside edge of the border (but underneath the border in z-ordering).

padding-box

The background extends to the outside edge of the padding. No background is drawn beneath the border.

content-box

The background is painted within (clipped to) the content box.

text 

The background is painted within (clipped to) the foreground text.

More explaination check css tricks 

The animates are about the changes of background position.Make it cool with customized way.