Порядок подачи CSS

Question

Я работаю над CSS и веб-разработкой, но сталкиваюсь с чем-то, чего я действительно не понимаю:

.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, если вы не включите ее в анимацию, как я показал.