Я хочу создать анимированную границу с помощью HTML и CSS ⇐ CSS

[Anonymous]

Я хочу создать анимированную рамку для двух элементов: один будет отображать цвет на границе, а другой — оттенки серого.
Оттенки серого необходимо применять только к однако граница, а не все изображение. Таким образом, изображение по-прежнему полноцветное, однако граница плавно анимируется только в оттенках серого.
Я не знаю, как это сделать, может кто-нибудь помочь?
Я использовал фильтр: оттенки серого, однако не знаю, есть ли способ применить его только к границе или мне нужно изменить структуру моего HTML и применить к нему другой CSS? p>
Вот мой код:

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

@property --bg-angle {
inherits: false;
initial-value: 0deg;
syntax: "[url=#]
[img]https://placehold.co/1200x100/blue/white[/img]
[/url]

[url=#]
[img]https://placehold.co/1200x100/blue/white[/img]
[/url]
< /code>
< /div>
< /div>
< /p>
И вот моя ссылка на мой код:
https: //codepen.io/alexdjoelle/pen/azopwdo
 

Подробнее здесь: [url]https://stackoverflow.com/questions/79390788/i-want-to-create-an-animated-border-using-html-and-css[/url]