I am currently working on a project that involves animating text (specifically "happy birthday to you") and a heart. The idea is for the heart to drop and hit each word one by one, turning them yellow upon impact. Once the last word is hit, the text should fade away momentarily before reappearing in its original color. I have managed to implement the animation using the transform property, but I am encountering issues with the colors. Any suggestions for fixing this would be greatly appreciated.
.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;
}
}