Come fare una transizione CSS "all'indietro"?

Question

Quindi ho questa transizione al passaggio del mouse, che crea un bordo nella parte inferiore dell'elemento su cui si trova il passaggio del mouse. Tutto va bene, ma quando il mouse lascia l'elemento, il bordo semplicemente scompare, mentre io voglio che si "ritragga" di nuovo. Codepen

HTML:

<div class="object"> 

<p>Object</p> 

</div> 

CSS:

* { 
background-color: #222; 
color: white; 
font-family: sans-serif; 
font-size: 30pt; 
} 

p { 
width: 200px; 
height: 100%; 
margin-top: 70px; 
text-align: center; 
transition: 0.2s border-bottom; 
-webkit-transition: 0.2s border-bottom; 
margin: auto; 
margin-top: 50px; 
} 

p:hover { 
    border-bottom: 5px solid white; 
} 

Come posso fare per fare questo, il più semplice possibile? Grazie 3

Answer 1

Le transizioni funzionano automaticamente in entrambe le direzioni.

Il problema che si verifica è che border-style non è una proprietà che può essere animata in modo che cambi istantaneamente.

Ciò significa che quando si passa il mouse su di esso, diventa solid all'istante e quindi passa il tempo a 5px.

Ma quando lo si individua, diventa none all'istante e non è possibile visualizzare l'animazione della larghezza.

Rendere esplicito lo stato predefinito (non librato) in modo che border-width sia l'unica cosa che cambia quando si passa il mouse su di esso.

Add:

border-bottom: 0px solid white; 

alle regole per p.

Answer 2

Aggiungi border-bottom: 0px solid white a p. Css vuole sapere dove tornare a! : D

Answer 3

per la transizione aggiungere una classe animato all'elemento si desidera la transizione

.animate 
{ 
    transition: all .5s; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    -ms-transition: all .5s; 
} 

Ora, quando si aggiunge questa classe per il vostro elemento farà la transizione sia in hover e librarsi fuori.