应用css的顺序 [英] Order of applying css

问题描述

我正在研究 CSS 和 Web 开发，但是遇到了一些我真的不明白的事情:

I'm working on CSS and web development,but just face a something which i really don't understand it:

.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%，这里是否有执行的优先级或者是不同的事情?

so my problem here is the indicated line doesn't apply on ".header" until the animation gets applied in other word it applies animation first then translate -50% ,is there a priority of execution here or it is different thing?

推荐答案

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

Usually the styles are parsed from top to bottom, however this isn't the issue here.

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

What is happening in your case is the transform is being applied initially, but then it is being overridden by the animation. Once the animation is over, the element is reverting back to its default style which has the transform.

本质上，即使首先应用了变换，您也不会看到它，直到动画结束后元素恢复到它为止.

Essentially, even though the transform is applied at first, you don't see it until the element reverts to it after the end of the animation.

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

The only solution if you want to have the transform during the animation, is to include it in the animation itself.

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

澄清一下，应用样式的顺序无关紧要.无论是先应用动画还是先应用变换，结果都是一样的.

To clarify, the order at which the styles are applied does not matter. Whether the animation or the transform is applied first, the result will be the same.

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

I think a source of your confusion is that the first transform is a translateX while the animation only does translateY. In both cases what is changing is the value of the transform property of the element. Therefore which axis the translation is on doesn't matter. First you set transform: translateX(-50%), but then once the animation kicks in, transform becomes translateY(2rem). The translateX part is removed from the transform, unless you include it in the animation like I have shown.

这篇关于应用css的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！