#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;
        }

        #box-title3{
            position: absolute;
            width: 100vw;
            text-align: center;
            font-size: 10vw;
            color:black;
            transition: all 4s;
            transform: translateX(100vw);
        }

        #box-mask{
            position: absolute;
            top: 40vh;
            width: 100vw;
            height: 30vh;
            background-color: white;
            transform: translateX(-100vw);
            transition: all 4s;
            overflow: hidden;
        }
    div id="box-title">
        pupa
    /div>
    div id="box-title2">
        pupa
    /div>
    div id="box-mask">
        div id="box-title3">
            pupa
        /div>
    /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-mask").style.transform=`translateX(0vw)`;
            document.getElementById("box-title3").style.transform=`translateX(0vw)`;
        },1000);
    /script>        
    

translateX解决不完美