CSS动画transform translateY也改变了translateX，但动画中没有指定答案

【问题标题】：CSS animation transform translateY also changing translateX, but is not specified in animationCSS动画transform translateY也改变了translateX，但动画中没有指定
【发布时间】：2022-06-21 17:00:16
【问题描述】：

在这里，我有一个包含 2 个动画的简单 CSS 文件。

.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%;
    }
    100% {
        opacity: 0%;
        transform: translateY(-10px);
    }
}

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

为什么即使我只在动画关键帧中指定 translateY，它也会在 transform 属性中操作 translateX？我怎样才能让它只改变 Y 值？

【问题讨论】：

标签： css css-animations css-transitions css-transforms

【解决方案1】：

您覆盖整个 transform 属性 - 而不仅仅是翻译。如果您想保留您的 translateX 值，您还必须将其包含在动画中。

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

【讨论】：