Регулировка масштабирования анимации соседних элементов ⇐ CSS

[Anonymous]

Я делаю анимацию масштабирования в бесконечном цикле. Каждый элемент масштабируется примерно в 2,5 раза.

При масштабировании он перекрывается с другими соседними элементами. Как я могу сделать так, чтобы у текущего элемента масштабирования было достаточно места для масштабирования без перекрытия.

Надеюсь, я смогу объяснить.

Спасибо, БТ

@keyframesounce { 10% { /* (100%/5)/2 */ /*transform: TranslateY(-20px);*/ преобразование: масштаб (2,50, 2,50); /*flex-grow: 4.3;*/ } 20% { /* (100%/5) */ трансформировать: транслироватьY(0); flex-grow: ясно; } } .main-box { ширина: 920 пикселей; дисплей: гибкий; оправдание-содержание: пространство вокруг; выровнять-элементы: по центру; разрыв: 16 пикселей; граница: сплошная желтая; } .коробка { ширина: 120 пикселей; соотношение сторон: 1; фон: вар (--bg); радиус границы: 4 пикселя; анимация: отскок 16 с var(--delay) бесконечная кубическая Безье(.2, .65, .6, 1); } .box.one { --bg: синевато-серый; --delay:calc(0*16с/5) } .box.two { --bg: глубокий розовый; --delay:calc(1*16с/5) } .box.three { --bg: Доджерблю; --delay:calc(2*16с/5) } .box.four { --bg: красный; --delay:calc(3*16с/5) } .box.five { --bg: желтый; --delay:calc(4*16с/5) } тело { высота: 250 пикселей; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; разрыв: 16 пикселей;