Как анимировать бордер тега fieldset?

Question

[Азамат]

Всем привет, допустим есть такой fieldset.


Суть анимации в том, что-бы бордер заполнялся постепенно.
Вот пример подобной анимации.
Как можно провернуть тоже самое, с тегом fieldset?

Comments

[Алексей Орлов]

А в чем проблема вместо див с классом box , написать fieldset и вставить туда инпуты?

[Азамат]

Алексей Орлов, пробовал, в таком случаи бордер перекрывает текст

[Алексей Орлов]

Азамат, если вы про текст "Работа со временем" задайте ему background-color: #FFF;

[Азамат]

Алексей Орлов, дело в том, что в моем случаи фон прозрачный и этот способ не подходит. Минут 30 гуглю решение этой задачи, возможно я не так гуглю.

[Алексей Орлов]

Азамат, Загрузите ваш пример на codepen, именно ваш.

[Азамат]

Алексей Орлов,

Вся суть проблемы в одной картинке

[ReaverJS]

Азамат, https://codepen.io/reaverjs/pen/BayZzqG
Граница с помощью SVG, анимация - с помощью transition.

Если получиться сделать только с before и after, а не так как в примере, то скиньте пожалуйста! Пытался транзишном менять высоту и ширину, но в обратную сторону криво откатывалась.