Почему в CSS анимации не работают два transfofm к одному элементу?

Question

[Дмитрий Акулич]

Не могу понять, почему при создании css анимации не работаю два подряд transfofm применённых к одному элементу. Причем если менять их местами, то срабатывает всегда только последний из transfofm.

Собственно нужно выполнить простое действие: сместить и увеличить:

@keyframes logo{
  100%{
    transform: scale(1.5);
    transform: translateY(50px);
}
}

Буду благодарен за разъяснение!

Answer 1

[Stalker_RED]

Попробуйте так:

@keyframes logo{
  100%{
    transform: scale(1.5) translateY(50px);
}
}

Почему? Потому что так написано в спецификации, например.
Если вы напишете

h1 {
  color: red;
  color: blue;
}

Вас же не удивит, что в результате будет применен синий цвет?

Впрочем, две записи transform тоже могут иметь смысл:

With 3D support, the second definition will override the first one. Without 3D support, the second definition is invalid and a UA falls back to the first definition.

div {
  transform: scale(2) rotate(45deg);
  transform: scale(2) rotate3d(0, 0, 1, 45deg);
}