Test-Fill-Color vs Color

by Sub Lines

HTML

<p class="text-fill">I am using text-fill-color</p>
<p class="normal">I am just using color</p>

CSS

body{background: teal}

p{
    font-family: sans-serif;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    
    background: url(http://www.jpl.nasa.gov/spaceimages/v2/getMediumImage.php?id=PIA03519) center center;
    
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    
    -webkit-animation: textMask 10s linear infinite;
    animation: textMask 10s linear infinite;
}

.text-fill {
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    -o-text-fill-color: transparent;
}

.normal {
    color: transparent;
}

@-webkit-keyframes textMask {
    from {background-position: right bottom}
    to {background-position: left top}
}
@keyframes textMask {
    from {background-position: right bottom}
    to {background-position: left top}
}