Animating an element to go left, outside of div-CodePudding

I have two buttons inside of a div, and I want to make an animation such that when you click one, it slides to the middle and the other is "pushed" away, outside of the div (which would make it disappear, because overflow is set to hidden). I achieve this by setting the left and right values of the buttons

@keyframes moveRight{
    0%{
    left: 0;}

    100%{
    left: 100px;}
}

@keyframes moveLeft{
    0%{
    right: 0;}

    100%{
    right: 100px;}

//There's a Javascript backend that animates when this is clicked

Moving to the right works perfectly as I would like, but when set to move to the left, neither item moves. My guess is that divs must not be able to display content to their left, which does make sense, but raises the issue of how to achieve the desired affect to the left side. I could just increase the div size so that there would be room to the left, but then I would lose the disappearing effect that I really like. How can I make this work?

Thanks for your time!

CodePudding user response：

If I understand you correctly you could use this:

@keyframes moveLeft{
    0%{
    left: 0;}

    100%{
    left: -100px;}

The reason this works is your element isn't positioned as absolute. So using right: has no meaning as that is only used for positioning an absolute element. Whereas left can be used for relative positioned elements:

If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.

You can read more about the left property here