这种动画可以使用吗？

Question

我制作了一个动画，其中动画了边框。但实际上，这只是一种幻想。

这是HTML

body {
	margin: 0;
	padding: 0;
	font-family: verdana;
}

.container {
	text-align: center;
	position: relative;
	margin-top: 15%;
	left: 35%;
}

.outer-block {
	width: 30vw;
	height: 30vh;
	background-color: white;
	overflow: hidden;
}

.inner-block {
	position: relative;
	display: inline-flex;
	width: 28vw;
	height: 27vh;
	background-color: white;
	top: -39.5vh;
	z-index: 2000;
}

.block-1 {
	height: 50vh;
	width: 5vw;
	background-color: black;
	z-index: 10;
	float: left;
	margin-left: 5vw;
	margin-top: -9vh;
}

.block-2 {
	top: 10vh;
	height: 50vh;
	width: 5vw;
	background-color: black;
	z-index: 10;
	float: left;
	margin-left: 10vw;
	margin-top: -9vh;

}

.outer-block:hover .block-1 {
	transform: rotate(1440deg);
	transition-duration: 12s;
	animation-name: colorchange;

}

.outer-block:hover .block-2 {
	transform: rotate(1440deg);
	transition-duration: 12s;
	animation-name: colorchange;
}

<div class="container">
	<div class="outer-block">
	  <div class="block-1"></div>
	  <div class="block-2"></div>

    <div class="inner-block"></div>
  </div>
</div>

所以基本上，我是在彼此之上制作多个形状。隐藏溢出并在按钮之间放置动画部分后，我可以控制边框动画（实际上不是边框）更多，因为我可以控制每个形状路径。

我唯一担心的是它将一直显示其弱点。我应该继续做这样的事情，还是更好地避免这种情况？

https://codepen.io/dario-sanchez-martinez/pen/LgZMZV