如何使动画绘制边框?(需要香草JS解决方案)

Question

我正在尝试构建一个放松应用程序。 为此，我需要绘制边框的动画。 我尝试的方式不是平稳过渡。 如何实现相同的目标？ 下面分享了部分javascript代码和codepen链接

https://codepen.io/TM06/pen/RwrRxLQ

.JS

if(count && seconds<=4){
document.getElementById("message").innerText = "Breathe In";
switch(seconds){
case 1 :
document.getElementById("container").style.borderTop = "8px solid red";
break;
case 2 : 
document.getElementById("container").style.borderRight = "8px solid red";
break;
case 3 :
document.getElementById("container").style.borderBottom = "8px solid red";
break;
case 4 : 
document.getElementById("container").style.borderLeft = "8px solid red";
break;
}
}else if(count === false && seconds< 5){
document.getElementById("message").innerText = "Breathe Out";
switch(seconds){
case 1 :
document.getElementById("container").style.borderLeft = "0px";
break;
case 2 : 
document.getElementById("container").style.borderBottom = "0px";
break;
case 3 :
document.getElementById("container").style.borderRight = "0px";
break;
case 4 : 
document.getElementById("container").style.borderTop = "0px";
break;
}
}

Answer 1

我已经实现了边框动画。在此处共享代码笔链接： https://codepen.io/TM06/pen/wvMgeaw

<div class="container h-100  align-items-center" id="container">
<div class="topBar" id="topBar"></div> 
<div class="rightBar" id="rightBar"></div>
<div class="bottomBar" id="bottomBar"></div>
<div class="meter9"><span class="leftBar" id="leftBar"></span></div>

不过，这还不完美。