文字颜色横向填充过渡

成品如图：

 蓝色内容从左往右将白色填充。

一步一步来，

若你和我一样需要'空心文字'需要给文字添加这个样式：

text-shadow: 0 0 2px #0f97ff;

HTML结构如下：

<div class="middle-words">
    <p class="default-text">change</p>
    <p class="transitional-text">change</p>
</div>

简单说就是两个相同的文字，然后设置脱离文档流，设置层级，然后通过js判断到一定的位置给高亮的（蓝色的文字元素）一个向右的类（动画）就好了。

具体css代码如下：

因为是scss写的，有些自定义的内容，但不影响该功能。

//动画，仅控制他的长度变化
@keyframes length-animation{
    0%{
        width:0%;
    }
    
    25%{
        width:35%;
    }
    
    50%{
        width:60%;
    }
    
    75%{
        width:85%;
    }
    
    100%{
        width:100%;
    }
}

p{
    font-family: $f-PK;
    text-transform: uppercase;
    color: $white;
    width: 100%;
    font-size: 100px;
    // line-height: initial;
    line-height: 100px;
    display: inline-block;
    white-space: nowrap;
    text-align: left;
    font-weight: 700;
    @media(max-width: $m-992){
        font-size: 80px;
        display: inline-block;
    }
    @media(max-width: $m-576){
        font-size: 58px;
        display: inline-block;
    }
    @media(max-width: $m-360){
        font-size: 50px;
    }
}
.default-text{
    width: 100%;
    text-shadow: 0 0 2px $blue-2;
    color: $white;
}
.transitional-text{
    position: absolute;
    pointer-events: none;
    top: 0px;
    left: 0px;
    color: $blue-2;
    overflow: hidden;
    width: 100%;
}
.transitional-over{
    animation: length-animation;
    animation-duration: 1.5s;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:1;
    animation-direction:normal;   
}

值得注意的是要给元素设置不换行操作（white-space: nowrap;不然动画会有问题），文字向左对齐（不然两个元素会对不齐），以及设置为行内块元素（为了居中，这样之后让父元素text-aligin-center;就好了），这几点也是坑了我不少时间。