Html CSS-以交错方式转换边界的不同部分

我有这个CSS/HTML：

其中，当我将鼠标悬停在div上时，我希望在hover上转换左边框、上边框、右边框和下边框。而不是一下子。我只能转换边界的一侧，不能分别转换

这是我的CSS：

#box{
    position : relative;
    width : 100px;
    height : 100px;
    background-color : gray;
    border : 5px solid black;    

    transition : border-left 500ms ease-in;
    transition : border-top 500ms ease-out;
    transition : border-right 500ms ease-in;
    transition : border-bottom 500ms ease-out;
    transition-delay: 0.5s;
}

#box:hover{
    border-left : 10px solid red;
    border-top: 10px solid red;
    border-right : 10px solid red;
    border-bottom : 10px solid red;
}

这是HTML：

<div id="box">roll over me</div>

滚翻我

有没有办法做到这一点？（仅使用CSS/HTML）

使用inspector，我看到转换的其他属性基本上被禁用：

---

为什么呢？我们不能单独转换每个属性吗？

您必须在一次

转换中列出它们

transition : border-left 500ms ease-in,
             border-top 500ms ease-out,
             border-right 500ms ease-in,
             border-bottom 500ms ease-out;

我忽略了一个事实，即您希望在每个动画之间有一个延迟。为此，请在每个转换事件中添加延迟时间

transition : border-left 500ms ease-in 0.5s,
             border-top 500ms ease-out 1s,
             border-right 500ms ease-in 1.5s,
             border-bottom 500ms ease-out 2s;

感谢@Paulie_D和@ImagineStudios让我注意到这一点

这是@Paulie_D的
OP不是在问如何做到这一点，他希望双方一个接一个地淡入another@ImagineStudios我意识到，当保利把小提琴贴出来的时候。谢谢你的澄清。请参阅我的编辑。