How to make a CSS transition work "backwards"?

Question

So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. 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;
}

How would I go about doing this, as simple as possible? Thank you ;3

Answer 1

Transitions work in both directions automatically.

The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.

This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.

But when you unhover it, it becomes none instantly and you can't see the width animating.

Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.

Add:

border-bottom: 0px solid white;

to the rules for p.

Answer 2

I don't know if this could help, but in my case I just did like this:

Over:

.<nameOfClass>:hover{
 transition: width 0.4s ease-in-out;
}

No over:

.<nameOfClass>:not(:hover){
 transition: width 0.4s ease-in-out;
}