Как совместить две анимации?

Question

[Дмитрий]

Подскажите, пожалуйста, как совместить две анимации, два transform, для одного элемента? Надо сделать, что шарик, вращающийся по кругу как бы мигал, пульсировал (через scale).
Шарик вращается через этот код:

@keyframes ball {
  0% {
    transform: rotate(0deg)
               translate(calc(-50px * 2))
               rotate(0deg);
   
  }
  100% {
    transform: rotate(360deg)
               translate(calc(-50px * 2))
               rotate(-360deg);
  }
}

А мигание, пульсация, через этот:

@keyframes scale_ball {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(2);
    }
    100% {
        transform: scale(0.5);
    }
}

Answer 1

[Ankhena]

0% {
        transform: rotate(0deg)
                translate(calc(-50px * 2))
               rotate(0deg)
               scale(0.5);
    }
    50% {
        transform: rotate(-180deg)
                translate(calc(-50px * 2))
                scale(2);
    }
    100% {
        transform: rotate(-360deg)
               translate(calc(-50px * 2))
               scale(0.5);
    }

https://jsfiddle.net/v0yut1xq/

Comments

[Дмитрий]

Спасибо, но Вы думаете этот способ не опробован? При этом варианте шарик не двигается по кругу, только меняется его размер. Здесь сам пример.

[Ankhena]

Дмитрий, логично.
В 50% тоже добавьте нужные положения.

Вот это очень странный calc translate(calc(-50px * 2)). Зачем 50 умножать на 2 с помощью calc?

[Дмитрий]

Ankhena, про calc, так надо :-) Всё равно спасибо за ответ! Правда, не получается так, как хотелось бы, как задумывалось.

[Ankhena]

Дмитрий, такого результата вы хотели достичь? Цвет полоски оставлен для наглядности.