html - CSS - 以交错方式过渡边框的不同部分

Question

我有这个 CSS/HTML:

其中，当我将鼠标悬停在一个 div 上时，我想在悬停时过渡左边框，然后是上边框，然后是右边框，然后是下边框。而不是一下子全部。我只能过渡边界的一侧，不能分别过渡。

这是我的 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)

http://jsfiddle.net/rtcH9/

使用检查器我看到转换的其他属性基本上被禁用了:

这是为什么呢？我们不能分别转换每个属性吗？

Answer 1

您必须在单个 transition

中列出它们

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 的 Demo Fiddle