Как эмулировать изменение соотношения сторон с помощью CSS-анимации? ⇐ Html

[Anonymous]

Я пробовал исследовать несколько источников, но ни один из них не касался конкретно моей проблемы. Я хочу использовать CSS, если это возможно, чтобы получить эффект границы, который имитирует некоторые изменения соотношения сторон, например, от 2,76:1 до 1,90:1.
Что-то вроде этого: https://www.tiktok.com/@reeseirby/video ... 6086864159?
Я использовал некоторый код из w3schools, но я нашел только анимацию, у которой обе границы идут в одном направлении, хотя мне хотелось бы, чтобы они шли в противоположных направлениях. Я новичок в этом, поэтому мне определенно чего-то не хватает, но я не могу найти необходимую информацию. Код, который я сейчас использую:
Анимация border-top-width
Постепенное изменение свойства border-top-width с 1 пикселя на 15 пикселей, а затем обратно

Код: Выделить всё

#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}

@keyframes mymove {
50% {
border-top-width: 15px;
}

50% {
border-bottom-width: 15px;
}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/797 ... -animation