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

[Anonymous]

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

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

#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;}
}




Animation of border-top-width

Gradually change the border-top-width property from 1px to 15px, then back:

Спасибо за любую помощь!


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