CSS бесконечная анимация нужна помощь ⇐ CSS

[Anonymous]

У меня мало элементов DIV/card. (скажем, 100х100 пикселей). первая коробка двойного размера Я ищу масштабирование первого блока до 100X100, затем масштабирование следующего блока до 200X200 и так далее в бесконечном цикле.

Можно ли сделать эту анимацию только с помощью css

Проверьте изображение как образец

для отображения небольшого размера эта анимация будет отключена

Спасибо, БТ [

1



@keyframes Scale { 10% { /* (100%/5)/2 */ /*transform: TranslateY(-20px);*/ преобразование: масштаб (1,5., 1,5); /*flex-grow: 4.3;*/ } 20% { /* (100%/5) */ преобразование: масштаб (2.0, 2.0); } } @keyframes уменьшает { 0%{ box + box: анимация: уменьшить 16 с var(--delay) бесконечный кубический критерий Безье(.2, .65, .6, 1); } 10% { /* (100%/5)/2 */ /*transform: TranslateY(-20px);*/ преобразование: масштаб (1,5., 1,5); /*flex-grow: 4.3;*/ } 20% { /* (100%/5) */ преобразование: масштаб (1,0, 1,0); } } @keyframes box::bounce ~ box { 10% { /* (100%/5)/2 */ /*transform: TranslateY(-20px);*/ преобразование: translatex (100 пикселей) /*flex-grow: 4.3;*/ } 20% { /* (100%/5) */ преобразование: масштаб (1, 1); } } .main-box { ширина: 920 пикселей; отображение: относительное; оправдание-содержание: пространство вокруг; выровнять-элементы: по центру; разрыв: 160 пикселей; отображение: встроенный блок; граница: сплошная желтая; поле: 100 пикселей; } .коробка { поле: 20 пикселей; ширина: 120 пикселей; высота: 120 пикселей; соотношение сторон: 1; фон: вар (--bg); радиус границы: 4 пикселя; отображение: встроенный блок; анимация: уменьшить 16 с var(--delay) бесконечный кубический критерий Безье(.2, .65, .6, 1); } .box.one { --bg: синевато-серый; --delay:calc(0*16с/5) } .box.two { ширина: 200 пикселей; высота: 200 пикселей; --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) } тело { высота: 550 пикселей; отображение: относительное; оправдание-содержание: центр; выровнять-элементы: по центру; разрыв: 16 пикселей;