CSS - переміщення різних частин кордону пошатним чином - html, css, css3

У мене такий 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/

За допомогою інспектора я бачу, що інші властивості переходу по суті вимкнені:

Чому так? Чи не можемо ми перенести кожну властивість окремо?

Відповіді:

2 для відповіді № 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 "s Демо Скрипка

---