CSS动画仅设置translateY为何改变translateX及解决方法

CSS的transform是整体赋值的复合属性，不存在“只修改其中某一个变换值、其余值保留”的默认行为。你给.div设置的基础样式transform: translateX(-50%)，会被动画关键帧中声明的transform: translateY(-10px)直接整体替换，导致原有X轴位移在动画过程中丢失，表现为X轴位置被异常修改。
另外你贴的基础样式代码存在笔误：.div选择器后缺失开括号{，修复后样式才会正常生效。

方案1：关键帧中补全所有transform值 #

在动画每个关键帧的transform声明里，把需要保留的X轴位移一并写上，保证动画过程中transform值始终包含原有X轴偏移：

.div {
    transform: translateX(-50%);
}

.fade-in {
    animation-name: fade-in;
    animation-duration: .2s;
}

.fade-out {
    animation-name: fade-out;
    animation-duration: .2s;
}

@keyframes fade-out {
    0% {
        opacity: 100%;
        transform: translateX(-50%);
    }
    100% {
        opacity: 0%;
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes fade-in {
    0% {
        opacity: 50%;
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        opacity: 100%;
        transform: translateX(-50%);
    }
}

这种写法兼容性最好，所有支持CSS动画的浏览器都能正常运行。

方案2：使用独立变换属性 #

现代浏览器支持拆分的独立变换属性，你可以把X、Y轴位移通过translate属性单独声明，不同轴的位移不会互相覆盖，代码维护成本更低：

.div {
    /* 独立translate属性，第一个值为X轴偏移，第二个为Y轴偏移 */
    translate: -50% 0;
}

.fade-in {
    animation-name: fade-in;
    animation-duration: .2s;
}

.fade-out {
    animation-name: fade-out;
    animation-duration: .2s;
}

@keyframes fade-out {
    0% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
        /* 仅修改Y轴偏移值，X轴自动继承基础样式的-50% */
        translate: -50% -10px;
    }
}

@keyframes fade-in {
    0% {
        opacity: 50%;
        translate: -50% -10px;
    }
    100% {
        opacity: 100%;
        translate: -50% 0;
    }
}

注意：独立变换属性不支持IE浏览器，如果需要兼容老旧浏览器请选择方案1。

内容的提问来源于stack exchange，提问作者Edwin Slotboom