从左到右缓慢改变边框颜色

Question

我可以轻松地在悬停时更改边框颜色，请参见此处： https://jsfiddle.net/vdcLzw2a/10/

.box{
  border: 3px solid black;
  width: 120px;
  height: 120px;
  border-radius: 100px;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition : border 500ms ease-out;
}

.box:hover{
  border-color: red;
  transition: border 0.25 ease-out;
}

是否有一种简单的方法可以使转换缓慢，这样一旦你悬停，它就会从左向右移动并且几乎在原始边框的顶部画一条线而不是同时突出显示它？