我在做一个项目，里面有一段文字（这是“祝你生日快乐”）和一颗心。在开始时，心下降，击中第一个单词，然后第二个，以此类推。当心击中文本，它应该变成黄色。当心击中最后一个单词，1或2秒后，文字褪色，并重新出现与以前的颜色。2我已经做了变换属性，但搞砸了颜色。3请建议我一些解决办法。

.main .text{
    font-size: 50px;
    font-family: cursive;
    color: white;
    animation: opacity-control 3.5s infinite;
    
}
.main .text span{
    display: inline-block;
    animation: text-jump 3.5s ease-in-out infinite, color-change 3.5s infinite;

    
}
.main .text span:nth-child(1){
    animation-delay: 0.25s;
}
.main .text span:nth-child(2){
    animation-delay: 0.5s;
}
    
.main .text span:nth-child(3){
    animation-delay: 0.75s;

}
.main .text span:nth-child(4){
    animation-delay: 1s;

}
.main .text span:nth-child(5){
    animation-delay: 1.25s;
}

@keyframes text-jump{
    0%{
        transform: translateY(0);
        color: yellow;
        
    }
    10%{
        transform: translateY(20px);
        color: yellow;
        
    }
    15%{
        transform: translateY(0);
        color: yellow;
    }
    100%{
        color: yellow;
    }
}

@keyframes opacity-control{
    0%{
        opacity: 1;
        
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@keyframes color-change{
    0%{
      
    }
    40%{
        color: yellow;
    }
    95%{
        color: yellow;
    }
    100%{
        color: white;
    }
}