为何我的CSS关键帧动画仅单向生效？

你遇到的核心问题是动画状态未被正确保留，导致切换属性时元素直接跳转而非平滑过渡：

1. 当docked=true的选择器不再匹配时，对应的动画被移除，animation-fill-mode: forwards的效果会立即失效——这个属性仅在动画被应用期间生效，动画移除后元素会直接回到未应用动画时的默认样式（即动画0%的状态）。
2. 随后应用docked=false的反向动画时，虽然animation-fill-mode: backwards会让元素在动画开始前应用原动画100%的状态，但这个状态切换和后续的反向动画过程被浏览器合并优化，视觉上就表现为直接跳转到0%状态，看不到过渡效果。

不要依赖animation-fill-mode: forwards保留状态，直接在选择器中写出动画关键帧的最终样式，让元素在无动画时也保持目标状态，再配合动画实现平滑过渡：

基础实现方案 #

/* 根据你的dockContent关键帧，写出对应状态的最终样式 */
.content[docked=true] {
    /* 对应动画100%的样式，示例： */
    left: 0;
    width: 100%;
    opacity: 1;
    /* 应用正向动画 */
    animation: dockContent ease var(--dock-animation-time);
    animation-direction: normal;
}

.content[docked=false] {
    /* 对应动画0%的样式，示例： */
    left: 200px;
    width: calc(100% - 200px);
    opacity: 0.8;
    /* 应用反向动画，结束后保留0%状态 */
    animation: dockContent ease var(--dock-animation-time);
    animation-direction: reverse;
    animation-fill-mode: forwards;
}

优化方案（用CSS变量统一管理样式） #

如果关键帧样式复杂，用变量统一管理可以避免重复代码：

:root {
    /* 定义停靠/未停靠状态的样式变量 */
    --docked-left: 0;
    --docked-width: 100%;
    --docked-opacity: 1;
    --undocked-left: 200px;
    --undocked-width: calc(100% - 200px);
    --undocked-opacity: 0.8;
}

.content[docked=true] {
    left: var(--docked-left);
    width: var(--docked-width);
    opacity: var(--docked-opacity);
    animation: dockContent ease var(--dock-animation-time);
}

.content[docked=false] {
    left: var(--undocked-left);
    width: var(--undocked-width);
    opacity: var(--undocked-opacity);
    animation: dockContent ease var(--dock-animation-time) reverse forwards;
}

@keyframes dockContent {
    from {
        left: var(--undocked-left);
        width: var(--undocked-width);
        opacity: var(--undocked-opacity);
    }
    to {
        left: var(--docked-left);
        width: var(--docked-width);
        opacity: var(--docked-opacity);
    }
}

这样切换docked属性时，元素不会因为动画移除而跳回默认样式，反向动画会从当前的停靠状态平滑过渡到未停靠状态，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Ewan Green