CSS动画transform与color属性问题：文本变色效果异常求助

问题根源分析 #

• 动画属性冲突：text-jump动画中全程设置color: yellow，直接覆盖了color-change的颜色控制逻辑，导致颜色效果完全不符合预期
• 缺失初始状态：color-change的0%关键帧未定义初始颜色，浏览器无法正确计算颜色过渡过程
• 时间线不匹配：原opacity-control只实现了渐隐，没有恢复可见的阶段，无法完成「渐隐后重现」的循环；同时颜色变化的时间点未和撞击动作对齐

修改后的完整CSS代码 #

.main .text{
    font-size: 50px;
    font-family: cursive;
    color: white;
    /* 调整总时长为5s，适配最后一个单词撞击后1-2秒的渐隐延迟 */
    animation: opacity-control 5s infinite;
}
.main .text span{
    display: inline-block;
    /* 分离动画职责，位移和颜色分别由两个独立动画控制 */
    animation: text-jump 3.5s ease-in-out infinite, color-toggle 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);
    }
    10%{
        transform: translateY(20px);
    }
    15%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);
    }
}

/* 调整透明度动画，增加恢复可见的阶段，实现完整循环 */
@keyframes opacity-control{
    0%{
        opacity: 1;
    }
    /* 最后一个单词撞击时间为1.25s，80%对应4s，刚好是撞击后2.75s，符合1-2秒延迟要求 */
    80%{
        opacity: 1;
    }
    90%{
        opacity: 0;
    }
    95%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* 精准控制颜色切换时间，和撞击动作同步 */
@keyframes color-toggle{
    0%{
        color: white;
    }
    /* 撞击跳跃阶段同步变为黄色 */
    10%{
        color: yellow;
    }
    /* 保持黄色直到渐隐开始前 */
    75%{
        color: yellow;
    }
    /* 渐隐阶段恢复白色，确保重现时回到初始状态 */
    100%{
        color: white;
    }
}

关键调整说明 #

1. 分离动画职责：让text-jump只处理位移，color-toggle专门控制颜色，彻底解决属性冲突问题
2. 对齐时间线：颜色在撞击的跳跃阶段（0-15%）切换为黄色，保持到渐隐前；透明度动画调整为5s总时长，确保最后一个单词撞击后1-2秒开始渐隐，随后恢复可见完成循环
3. 明确初始状态：所有动画的0%关键帧都定义了初始属性值，保证动画过渡平滑无异常

内容的提问来源于stack exchange，提问作者Veerpal Kaur