How to make a CSS animation starting from one side in Hover and ending from the other when Hover comes out?

Question

I have an animation where an element appears entering from left to right when I do the :hover in the .box, but I would like that when I took the mouse from the .box the element now exits from the right.

The idea is like this, when you put the mouse in the box the element enters from the left and when you take the mouse the element leaves from the right.
(That is, in the hover the element comes in and stops in the middle, how much comes out of the hover the entered element exits from the other side)

And I’d like something like the image above...

What I have achieved so far is the element coming in from the left and also coming out from the left, but I want it to come out from the other side!
OBS: I left the overflow: hidden commented in the CSS for easy visualization of the animation, but at the end I will use with the overflow activated!

.box {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    margin: auto;
    position: relative;
    /* overflow: hidden; */ 
    
}
.filho {
    width: 30px;
    height: 30px;
    background-color: red;
    position: relative;
    left: -100%;
    transition: left 500ms;
}
.box:hover .filho {
    left: 0%;
}

Quando tirar o mouse o bloco vermelho deve sair pela direita...<br><br>
<div class="box">
    <div class="filho"></div>
</div>

Answer 1

I came up with two solutions. A simpler one that would be ideal if the element occupies 100% of the width of the .box. The other is a little more "sophisticated", and the element can have any size, but needs a "fit" if it has content within the .box

Option 1

The most complicated option that is more faithful to the proposal of the question what I did was "mirror" the .box with scaleX(-1) when doing the :hover so fast that the eye does not notice and performs the animation entering kind of brings forward, and when you take the :hover from the element he draws that scaleX(-1) and performs the animation coming out to the right side.

Did he seem confused? See how the result looks:

.box {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    margin: auto;
    position: relative;
    text-align: center;
    flex-direction: column;
    overflow: hidden;
}

.filho {
    width: 30px;
    height: 30px;
    background-color: red;
    position: relative;
    left: 100%;
    transition: left 500ms;
}
.box:hover .filho {
    left: 0%;

}
.box:hover, 
.box:hover span {
    transform: scaleX(-1);
}

<div class="box">
    <span>texto</span>
    <div class="filho"></div>
</div>
    

---

Option 2

Now a little but simple u option where I used transform: scaleX(0); to "hide" the element on the left and used and transform-origin: right; to make it "grow" to the right. And in :hover I did the reverse transform-origin: left; to make him disappear out the left (left).

.box {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    margin: auto;
    position: relative;
    text-align: center;
    flex-direction: column;
    overflow: hidden;
}

.filho {
    height: 30px;
    width: 100%;
    background-color: red;
    position: relative;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 500ms;
}
.box:hover .filho{
    transform: scaleX(1);
    transform-origin: left;
}

<div class="box">
    <span>texto</span>
    <div class="filho"></div>
</div>