Wie kann ich eine Änderung des Seitenverhältnisses mithilfe einer CSS-Animation emulieren? ⇐ JavaScript

[Anonymous]

Ich habe versucht, anhand einiger Quellen zu recherchieren, aber keine davon hat sich speziell auf mein Problem konzentriert. Ich möchte, wenn möglich, CSS verwenden, um einen Rahmeneffekt zu erhalten, der einige Änderungen des Seitenverhältnisses emuliert, etwa von 2,76:1 auf 1,90:1.
Etwas in der Art: https://www.tiktok.com/@reeseirby/video ... 6086864159?
Ich habe verwendet etwas Code von w3schools, aber ich habe nur Animationen gefunden, bei denen beide Ränder in die gleiche Richtung verlaufen, während ich möchte, dass sie in entgegengesetzte Richtungen verlaufen. Ich bin neu in diesem Bereich, also fehlt mir definitiv etwas, aber ich kann die notwendigen Informationen nicht finden. Code, den ich derzeit verwende:
Animation von border-top-width
Ändern Sie die Eigenschaft „border-top-width“ schrittweise von 1 Pixel auf 15 Pixel und dann zurück

Code: Select all

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

Code: Select all