在css中为元素周围的边框设置动画

Question

什么是 webkit css 动画的代码，它从一个角开始追踪元素（比如 div 或标题）周围的边框，然后围绕整个元素返回到原来的角？

用外行的话来说，如果有人用铅笔在元素周围的一行中画了一个矩形。

效果必须是永久性的，而不是仅在用户将鼠标悬停在元素上时才会发生。

Answer 1

也许是这样的？

@keyframes pencil {
  0% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #000 #fff #fff #fff;
  	top:0%;
    left: 0%;
  }
  25% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #000 #fff #fff;
  	top:0%;
    right: 100%;
  }
  50% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #000 #fff;
  	top:100%;
    right: 100%;
  }
  75% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #fff #000;
  	top:100%;
    right: 0%;
  }
  100% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #fff #fff;
  	top:0%;
    right: 0%;
  }
}

.pencil-border {
	border: 2px solid #fff;
  animation: pencil 2s infinite linear;
}

<div class="pencil-border">
Test
</div>