在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>