JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<p class="test">Test</p>

CSS

body { margin: 20px; }
body .animate { color: #ccc; }
.test {
    text-transform: uppercase;
    -webkit-text-stroke: 2px black;
    font-size: 80px;
    /*color:#FFE4C4;*/
    font-family: Impact, sans-serif;
    letter-spacing: 6px;
    color:#fff;
    background: -webkit-linear-gradient(bottom, rgba(255, 228, 196, 1) 50%, rgba(0, 0, 0, 1) 52%) repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-background-size:57px 188px;
}

.test {
    -webkit-animation-duration: 1s;
    /*-webkit-animation-delay: .2s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;*/
    -webkit-animation-name: masked-animation;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;    
}

@-webkit-keyframes testing {
    0% {
        color: red;
    }

    60% {
        color: black;
    }

    100% {
        color: yellow;
    }
}

/* Test */
@-webkit-keyframes masked-animation {
    0% {background-position: left bottom; }
    100% {background-position: left top;}
}