应用 css 的顺序

Question

我正在从事 CSS 和 Web 开发，但遇到一个我真的不明白的事情：

.header{
position: absolute; 
width:60%;
top: 20%;
left: 50%;
transform: translateX(-50%);<------ executed after animation
text-align: center;
animation: moveUp 2s;
animation-fill-mode: backwards;
}
@keyframes moveUp{
0%{
    opacity: 0;
    transform:translateY(2rem);
   }
100%{
    opacity: 1;
    transform: translateY(0rem);
    }

}

所以我的问题是，在应用动画之前，指示的行不适用于“.header”，换句话说，它首先应用动画然后翻译 -50%，这里有执行优先级还是不同的事情?

Answer 1

通常样式是从上到下解析的，但这不是这里的问题。

在您的情况下发生的情况是最初应用了变换，但随后它被动画覆盖了。动画结束后，元素将恢复为具有变换的默认样式。

基本上，即使最初应用了变换，您也不会看到它，直到动画结束后元素恢复为它。

如果您想在动画期间进行变换，唯一的解决方案是将其包含在动画本身中。

@keyframes moveUp {
    0 % {
        opacity: 0;
        transform: translate(-50%, 2rem);
    }
    100 % {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

编辑：为了澄清，应用样式的顺序并不重要。无论是先应用动画还是变换，结果都是一样的。

我认为您感到困惑的一个原因是第一个转换是translateX，而动画只做translateY。在这两种情况下，改变的是元素的 transform 属性的值。因此，平移在哪个轴上并不重要。首先你设置transform: translateX(-50%)，但是一旦动画开始，变换就变成translateY(2rem)。 translateX 部分已从 transform 中删除，除非您像我展示的那样将其包含在动画中。