Animating an element to go left, outside of div

Question

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!

Answer 1

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

Answer 2

If you want full control of where a tag is by x, y coordinates you must assign position: absolute to all applicable tags (in your case that would be the <button>s) and then add position: relative to the tag that contains them (in your case that would be the <div>). The position of all of the children tags with position: absolute (ie <button>s) are relative to the closest ancestor tag with position: relative (ie <div>).

The example below is animated more or less to what you described. I added it as a bonus, hence no explanation since that wasn't part of the question. If you have any questions post another question with a minimal reproducible example.

const menu = document.querySelector('menu');

menu.onclick = launch;

function launch(e) {
  const clicked = e.target;

  if (clicked.matches('button')) {
    if (clicked.classList.contains('ltr')) {
      clicked.classList.add('moveRight');
      document.querySelector('.rtl').classList.add('bumpRight')
    }
    if (clicked.classList.contains('rtl')) {
      clicked.classList.add('moveLeft');
      document.querySelector('.ltr').classList.add('bumpLeft');
    }
  }
}

menu {
  position: relative;
  width: 166px;
  height: 3rem;
  margin: 20px auto;
  border: 3px inset cyan;
  border-radius: 6px;
  font-size: 3rem;
  overflow: hidden;
}

button {
  position: absolute;
  top: -11.5px;
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.ltr {
  left: -7px;
}

.rtl {
  right: 58px;
}

.moveLeft {
  animation: rightToLeft 0.5s forwards ease-in;
}

.moveRight {
  animation: leftToRight 0.5s forwards ease-in;
}

.bumpLeft {
  animation: toLeftEdge 0.6s forwards ease-out;
}

.bumpRight {
  animation: toRightEdge 0.6s forwards ease-out;
}

@keyframes leftToRight {
  0% {
    left: -7px;
  }
  50% {
    left: 98px;
  }
  100% {
    left: 70px;
  }
}

@keyframes rightToLeft {
  0% {
    right: 58px;
  }
  50% {
    right: 160px;
  }
  100% {
    right: 135px;
  }
}

@keyframes toLeftEdge {
  0% {
    left: -7px;
  }
  50% {
    left: -7px;
  }
  100% {
    left: -70px;
  }
}

@keyframes toRightEdge {
  0% {
    right: 58px;
  }
  50% {
    right: 58px;
  }
  100% {
    right: -70px;
  }
}

<menu>
  <button class='ltr'>??</button>
  <button class='rtl'>??</button>
</menu>