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

Question

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

Navigation

#1 by (0 votes)

4

I have an animation where an element appears entering from left to right when I do the :hover in the .box , however I would like that when I take the mouse out of .box the element would exit right now.

The idea is like this, when you put the mouse in box , the element enters from the left and when you take the mouse, the element exits from the right. in% with the element it enters and stops in the middle , how much leaves hover the element that entered leaves on the other side)

AndIwouldlikesomethingliketheimageabove...

WhatIhaveachievedsofaristheelemententeringfromtheleftandtbcomingoutfromtheleft,butIwantittocomeouttheotherside!I'veleftthehovercommentedoutintheCSStomakeiteasiertoseetheanimation,butintheendI'mgoingtouseitwithoverflow:hiddenenabled!

.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>

css css3 ui css-hover

asked by anonymous 16.11.2018 / 15:22

1 answer

Sum of intervals Is it possible to do Polyfill for Arrow function and Template String?

score 0 · Answer 1

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

Option 1

The most complicated option and the one that is most faithful to the proposal of the question, what I did was to "mirror" .box with scaleX(-1) when doing :hover so fast that the eye does not perceive and executes the animation type brings forward , and when you take out the :hover of the element it removes that scaleX(-1) and executes the animation going to the right side.

Did it look confusing? Here's how it works:

.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 simpler option, where I used transform: scaleX(0); to "hide" the element on the left and used transform-origin: right; to make it "grow" to the right. And in :hover I did the inverse transform-origin: left; to make it disappear by going 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>