Как запустить 2 анимации (css, @keyframes)?

Question

[Ivan Ukhov]

Есть данный класс при нажатии он вешается на объект не могу понять почему работает только одна анимация (последняя).
Пробовал писать не в одну строку а через единичные свойства (animation-name: around, transform и т.д.)

.animate--active {
  animation: around 12s infinite linear, transform 2s infinite linear;
}

Comments

[Sergiu Mitu]

все верно, так и пишется.

вот пример

работают оба анимации как видно

[cssfish]

делайте сэмпл, чего гадать

[Ivan Ukhov]

Сергей cssfish гляните мб?

https://codepen.io/Ukhov/pen/qXpjjB?editors=1111

[Ivan Ukhov]

cssfish: не понял про сэмпл

[cssfish]

все норм, летит вниз и вправо

[Ivan Ukhov]

cssfish: а увеличивается?

[Ivan Ukhov]

он должен увеличиваться.уменьшаться, и ездить по кругу

[Sergiu Mitu]

Ivan Ukhov: проблема у вас в том что одна анимация перекрывает друг друга, а именно transform от второго перекрывает от первого, вам нужно их совместить в одну анимацию

[Ivan Ukhov]

Сергей: у них же разные имена как они могут перекрывать, не понимаю

[cssfish]

Ivan Ukhov: а я эту смотрел https://codepen.io/MSerj/pen/vJdZZO

[Sergiu Mitu]

Ivan Ukhov: имена у них разные а свойство они меняют одно, transform. представьте что у вас там не transform а opacity. Первая анимация пытается сделать opacity 0 а вторая анимация opacity 1, что произойдет?

[Ivan Ukhov]

Сергей: ага, вроде понятно если другое свойство менять то будет норм, ща проверю. Интерес именно в том что бы совместить 2 анимации поэтому вариант обьединить это в 1 не подходит

[Sergiu Mitu]

Ivan Ukhov: да, все верно. Пример с двумя разными свойствами я уже присылал.

[Ivan Ukhov]

Сергей: cssfish: Всем спасибо)

[cssfish]

Ivan Ukhov: закрывайте тему решенной )

Answer 1

[cssfish]

в общем нельзя transform из двух мест дергать, это так не работает
должно быть чего-то типа transform: translate(580px), scale(1.2);

если надо делить - делайте обертку, один трансформ на нее вешайте и тогда взлетит