html边框环绕一周动画,环绕式CSS边框动画

我正在尝试使用纯CSS获得类似环绕效果的边框动画。

现在我在做它的方式是:before和:after伪元素大小发生变化。一个用于顶部和右侧边框，一个用于底部和左侧边框。

但是，由于宽度和高度的差异，我得到了怪异的效果，因为每一侧花费的时间相等，但是由于宽度远大于高度，因此看起来速度要快得多。

在不事先知道div大小的情况下如何解决？

同样，也欢迎采用SCSS / vanilla CSS来获得相同动画的任何不同方法。

似乎我无法在SO上更改代码段的大小，但是如果您想玩转，这里是一个Codepen：https：//codepen.io/lollobaldo2000/pen/KKPazNw？editors = 1100

* {

box-sizing: border-box;

}

body {

background: black;

}

.square {

background: black;

display: block;

width: 500px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

margin: -100px auto auto -250px;

}

.square:before, .square:after {

content: '';

width: 0%;

height: 0%;

position: absolute;

border: 1px solid #FB0;

animation-fill-mode: forwards;

}

.square:before {

left: 0;

top: 0;

border-bottom: 0;

border-left: 0;

animation: btm 2s ease-in forwards;

}

.square:after {

visibility: hidden;

right: 0;

bottom: 0;

border-top: 0;

border-right: 0;

animation: btm 2s 2s ease-out forwards;

}

@keyframes btm {

0% {

visibility: visible;

width: 0;

height: 0;

}

50% {

width: 100%;

height: 0;

}

100% {

width: 100%;

height: calc(100% - 1px);

visibility: visible;

}

}