Как сделать, чтобы анимация scale имела одинаковый размер для всех блоков?

Question

[XenTerSeO]

При задании параметров

@keyframes pulsate {
  0% {
    transform: scale(1)
  }
  50% {
    transform: scale(0.98)
  }
  100% {
    transform: scale(1)
  }
}

Анимация 'пульсации' имеет разные масштабы, в зависимости от количества элементов в блоке -
https://jsfiddle.net/mnyxqqLh/

Как сделать так, чтобы анимация была маленькой, как в первом блоке?

Answer 1

[Алексей A]

transform: scale() вычисляется от высоты и ширины самого блока. Например, если блок 50px на 50px, то transform: scale(0.5) уменьшит блок до 25px на 25px. А transform: scale(0.5, 1) уменьшит только ширину до 25px.
Так как у вас второй блок включает много элементов, его высота достаточно большая (10829px). Поэтому даже scale(0.99) будет равен 108.29px. (10829 - (10829 * 0.99) = 108.29).

Вам же надо классы присваивать каждому из элементов. Я сделал просто для всех параграфов (на практике лучше так не делать). jsfiddle