如何避免CSS Transition与Animation冲突？

修改后的完整代码 #

.heading {
    background-color: crimson;
    width: 440px;
    display: flex;
    justify-content: space-evenly;
    padding: 10px;
}

.heading span {
    background-color: bisque;
    padding: 20px;
    /* 仅在非hover状态启用过渡，控制取消hover时的右到左恢复 */
    transition: color 1s, transform 2s;
    color: transparent;
    transform: rotateX(180deg);
}

.heading:hover span {
    /* hover时禁用过渡，避免和动画冲突 */
    transition: none;
    /* 添加forwards让动画结束后保持最终状态 */
    animation: show 2s linear forwards;
}

#first_letter {
    animation-delay: 0.1s;
    transition-delay: 1.1s;
}

#second_letter {
    animation-delay: 0.3s;
    transition-delay: 0.9s;
}

#third_letter {
    animation-delay: 0.5s;
    transition-delay: 0.7s;
}

#fourth_letter {
    animation-delay: 0.7s;
    transition-delay: 0.5s;
}

#fifth_letter {
    animation-delay: 0.9s;
    transition-delay: 0.3s;
}

#sixth_letter {
    animation-delay: 1.1s;
    transition-delay: 0.1s;
}

@keyframes show {
    0% {
        transform: perspective(150px) rotateX(180deg);
        color: transparent;
    }
    50% {
        color: transparent;
    }
    to {
        color: black;
        transform: rotateX(0deg);
    }
}

<h1 class="heading">
    <span id="first_letter">E</span>
    <span id="second_letter">F</span>
    <span id="third_letter">F</span>
    <span id="fourth_letter">E</span>
    <span id="fifth_letter">C</span>
    <span id="sixth_letter">T</span>
</h1>

关键修改点说明 #

1. hover时禁用过渡：在.heading:hover span里加transition: none;，这样鼠标悬停时只会执行动画，不会触发过渡，直接搞定两者冲突的问题。
2. 动画结束后保留状态：给animation加forwards属性，动画跑完后就停在最后一帧的状态，不会跳回初始的透明和翻转状态。
3. 让动画全权控制样式：删掉hover状态里直接写的transform和color，让动画完全接管这些属性，避免和过渡规则“打架”。
4. 保留原有的延迟顺序：原来的animation-delay（左到右启动）和transition-delay（右到左恢复）保持不变，保证hover时从左到右逐个动，取消hover时从右到左逐个恢复。

这样修改后就能实现你要的效果：hover时从左到右逐个执行翻转动画显示文字，取消hover时从右到左逐个过渡回隐藏状态，颜色和旋转效果也能同步生效。

内容的提问来源于stack exchange，提问作者Utsav Meena