#box-title {
            width: 100vw;
            text-align: center;
            font-size: 10vw;
            color: hotpink;
            transition: all 1s linear;
        }

        #box-title2 {
            position: absolute;
            top: 40vh;
            width: 100vw;
            text-align: center;
            font-size: 10vw;
            color: red;
            transition: all 1s linear;
            clip-path: inset(0% 0% 0% 0%);
        }

        #box-title3 {
            position: absolute;
            top:40vh;
            width: 100vw;
            text-align: center;
            font-size: 10vw;
            color: black;
            z-index:-1;
        }

    div id="box-title">
        pupa
    /div>
    div id="box-title2">
        pupa
    /div>
    div id="box-title3">
        pupa
    /div>
    script>
        setInterval(() => {
            document.getElementById("box-title").style.color = `rgb(${Math.random() * 135 + 100},${Math.random() * 135 + 100},${Math.random() * 135 + 100})`;
        }, 1000);
        setInterval(() => {
            document.getElementById("box-title2").style.clipPath = `inset(0% 100% 0% 0%)`;
        }, 1000);
    /script>
    

clip-path完美解决