Animieren Grenzen (Grenze-links, Grenze-oben) von Box auf Hover

Question

Ich möchte zwei Grenzen auf Hover speziell Rand-links und Rand-oben zu animieren. Nach einigen Nachforschungen scheint es nicht möglich zu sein, dass Sie die Grenzen selbst "animieren" können, also müssen Sie eine "Linie" erstellen, die beim Hover eine Breite von 100% hat, um denselben Effekt zu erzielen.

Ich weiß, wie dies mit Unterstreichen von Menüelementen zu tun, aber ich möchte es mit dieser Box, die ich versuche zu erstellen. Speziell beim Schweben (unter Beibehaltung der bereits geschriebenen CSS-Effekte)

1) border-left sollte sich nach oben und rechts erstrecken nach-> 2) border-top erstreckt sich von links nach rechts.

Ich fragte mich auch, wie ich wählen kann, welche Grenzen zu erweitern, wenn ich nicht nur Grenze-links oder Grenze-Spitze tun möchte.

Dies ist meine Box so weit (leider nichts mit animiere Grenzen):

CSS:

#txt{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    font-size:2vw; 
} 
#box{ 
    position:fixed; 
    top:25%; 
    left:25%; 
    height:20vw; 
    width:20vw; 
    border-right: 2px solid deepskyblue; 
    border-bottom: 2px solid deepskyblue; 
    background-color:black; 
    color:ghostwhite; 
} 
#box:hover{ 
    color:deepskyblue; 
    transition: color 0.25s ease; 
} 
#box:after{ 
    content:""; 
    position:absolute; 
    bottom: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
    transform: scale(0, 0); 
    transform-origin:bottom right; 
    background: ghostwhite; 
    z-index: -1; 
    transition: transform 0.25s ease; 
} 
#box:hover::after{ 
    transform: scale(1, 1); 
    color:deepskyblue; 
} 

HTML:

<div id="box"> 
<span id="txt">TEXT</span> 
</div> 

Answer 1

Sie können die #txt Element so groß machen wie die Übergeordnete Box und verwenden Sie dann Pseudo-Element, um "Grenzen" zu machen und die Dimensionen dieser Pseudo-Elemente zu animieren.

Wenn Sie eine transiton-delay in hinzufügen, denke ich, dass Sie den gewünschten Effekt erzielen können.

#txt { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#box { 
 
    font-size: 2vw; 
 
    position: fixed; 
 
    top: 1em; 
 
    left: 40vw; 
 
    height: 20vw; 
 
    width: 20vw; 
 
    background-color: black; 
 
    color: ghostwhite; 
 
} 
 

 
#box:hover { 
 
    color: deepskyblue; 
 
    transition: color 0.25s ease; 
 
} 
 

 
#box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: scale(0, 0); 
 
    transform-origin: bottom right; 
 
    background: ghostwhite; 
 
    z-index: -1; 
 
    transition: transform 0.25s ease; 
 
} 
 

 
#box:hover::after { 
 
    transform: scale(1, 1); 
 
    color: deepskyblue; 
 
} 
 

 
#txt::before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 2; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 0; 
 
} 
 

 
#txt::before { 
 
    width: 0; 
 
    border-left: 2px solid deepskyblue; 
 
    transition: height .25s .5s ease; 
 
} 
 

 
#txt:hover::before { 
 
    height: 100%; 
 
} 
 

 
#txt::after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0%; 
 
    top: 0; 
 
    left: 0; 
 
    border-top: 2px solid deepskyblue; 
 
    transition: width 0.25s .75s ease; 
 
} 
 

 
#txt:hover::after { 
 
    width: 100%; 
 
}

<div id="box"> 
 
    <span id="txt">TEXT</span> 
 
</div>