Usando transições com delay, dá pra fazer. Veja um exemplo:
a { display:block; position:relative; background:#ffc; width:300px; height:180px }
a::before, a::after { content:""; display:block; box-sizing:border-box;
position:absolute;z-index:5; pointer-events: none;
width:0; height:0; opacity:0; border:2px solid red }
a::before { border-left:none; border-bottom:none; left:0; top:0;
transition:width .5s linear 1.5s, height .5s linear 1s, opacity .1s 2s }
a::after { border-top:none; border-right:none; right:0; bottom:0;
transition:width .5s linear .5s, height .5s linear, opacity .1s 1s }
a:hover::before, a:hover::after { width:100%; height:100%; opacity:1 }
a:hover::before { transition:width .5s linear, height .5s linear .5s, opacity .1s }
a:hover::after { transition:width .5s linear 1s, height .5s linear 1.5s, opacity .1s 1s }
<a>Ponha o ponteiro do mouse aqui</a>
Basicamente criamos dois pseudoelementos, o ::before
com a parte superior direita, e o ::after
com a parte inferior esquerda.
Usamos posição absoluta nos pseudoelementos e display: block
para garantirmos que o elemento ocupe a área toda do parent, que tem posição relativa, para limitar a área dos pseudoelementos.
O z-index:5
faz com que os elementos com borda apareçam sempre por cima do elemento principal, e o pointer-events:none
evita que eles "roubem" o clique do mouse do elemento principal.
Como as bordas ficariam aparecendo nos cantos antes da animação, usamos o opacity
para escondê-las até o momento certo.
Finalmente, para termos a animação desenhando e "desdesenhando" na hora que o mouse sai do elemento, aplicamos transition
s diferentes dentro do elemento, e do elemento:hover
.
Para alterar a velocidade, lembre-se de alterar todos os tempos na mesma proporção. A animação atual leva 2 segundos. Por exemplo, se quiser que dure um segundo só, tem que trocar nessa proporção:
Tudo que for .5s por .25s
1s por .5s
1.5s por .75s
2s por 1s
.1s você pode manter, pois é pra ser "quase instantâneo" mesmo.
Basta manter a proporção para outras velocidades.