CSS 旋转动画未按设定触发且额外多旋转问题求助

问题根源 #

你遇到的旋转动画时序错误、多执行一次的问题，核心原因是@keyframes rotateMain缺少关键节点的状态定义：
CSS @keyframes规则默认会自动补全未声明的0%和100%节点的属性值为元素初始值，你当前仅定义了42.85%_{57.14%节点的旋转状态，会导致浏览器自动生成从0%到42.85%的旋转过渡、以及57.14%到100%的回退过渡，不符合你要求的仅3}4秒执行旋转的逻辑。

修复方案 #

1. 修正旋转动画关键帧定义 #

显式声明各时间节点的旋转状态，避免浏览器自动补间生成多余动画：

@keyframes rotateMain {
    /* 0~3秒全程保持0度，不执行旋转 */
    0%, 42.85% {
        transform: rotate(0deg);
    }
    /* 3~4秒完成360度旋转 */
    57.14% {
        transform: rotate(360deg);
    }
    /* 4秒后立刻复位到0度，保持到本轮动画结束 */
    57.14%, 100% {
        transform: rotate(0deg);
    }
}

2. 统一所有动画的运行参数 #

确保父元素、子元素绑定的动画总时长、缓动函数、循环规则完全一致，避免时序错位：

main {
    animation: rotateMain 7s linear infinite;
}
left {
    animation: moveRight 7s linear infinite;
}
middle {
    animation: hideMiddle 7s linear infinite;
}
right {
    animation: moveLeft 7s linear infinite;
}

3. 可选：补充其他关键帧的显式声明（增强稳定性） #

为了避免其他动画也出现类似的自动补间问题，可以给其余关键帧补充全节点状态定义：

@keyframes hideMiddle {
    0%, 28.57% { opacity: 1; }
    28.57%, 85.71% { opacity: 0; }
    85.71%, 100% { opacity: 1; }
}
@keyframes moveRight {
    0%, 28.57% { transform: translateX(0%); }
    28.57%, 85.71% { transform: translateX(15%); }
    85.71%, 100% { transform: translateX(0%); }
}
@keyframes moveLeft {
    0%, 28.57% { transform: translateX(0%); }
    28.57%, 85.71% { transform: translateX(-22%); }
    85.71%, 100% { transform: translateX(0%); }
}

内容的提问来源于stack exchange，提问作者Daniel Olarte