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中移除，除非您将其包含在我所显示的动画中。

申请顺序的顺序

1 个答案: