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