Text-Fill-Color

by redky

HTML

<p>共勉！再苦的日子也要大声笑出来。</p>

CSS

body {
    background-color: #333;
    text-align: center;
}

p {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: run 1s ease forwards infinite;
}

@-webkit-keyframes run {
    0% { background-image: linear-gradient(to right, #000, #000); }
   10% { background-image: linear-gradient(to right, #fff 10%, #000 10%); }
   20% { background-image: linear-gradient(to right, #000 10%, #fff 20%, #000 30%); }
   30% { background-image: linear-gradient(to right, #000 20%, #fff 30%, #000 40%); }
   40% { background-image: linear-gradient(to right, #000 30%, #fff 40%, #000 50%); }
   50% { background-image: linear-gradient(to right, #000 40%, #fff 50%, #000 60%); }
   60% { background-image: linear-gradient(to right, #000 50%, #fff 60%, #000 70%); }
   70% { background-image: linear-gradient(to right, #000 60%, #fff 70%, #000 80%); }
   80% { background-image: linear-gradient(to right, #000 70%, #fff 80%, #000 90%); }
   90% { background-image: linear-gradient(to right, #000 80%, #fff 90%, #000 100%); }
  100% { background-image: linear-gradient(to right, #000, #000); }
}