CSS 动画 - 如何使用一个关键帧声明切换方向

Question

我希望 div 在单击按钮时向右移动，然后在单击同一按钮时再次向左移动。我只想用一个 keyframes宣言。这可以通过交换类(class)来实现吗？
我已经在 CodePen 中尝试过这个，但不幸的是，div 在第一个动画后弹回，然后第二次拒绝动画。
我没有使用 CSS 过渡，因为我希望能够使用 CSS 动画的功能，如弹跳效果。

window.addEventListener("load", function() {
  var movedOver = false;

  document.querySelector("button").addEventListener("click", function() {
    var buttonEl = document.querySelector(".one");

    if (movedOver) {
      buttonEl.classList.remove("do-the-slide");
      buttonEl.classList.add("do-the-slide-back");

    } else {
      buttonEl.classList.remove("do-the-slide-back");
      buttonEl.classList.add("do-the-slide");
    }

  });

});

.container {
  position: absolute;
  perspective: 800px;
  >div {
    position: absolute;
    padding: 20px;
    text-align: center;
    width: 100px;
  }
  >div.do-the-slide {
    animation: moveOver 1s ease-out;
  }
  >div.do-the-slide-back {
    animation: moveOver 1s reverse ease-out;
  }
  >.one {
    background: red;
  }
}

button {
  margin-top: 100px;
}

@keyframes moveOver {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(100px);
  }
}

<div class="container">
  <div class="one">One</div>
</div>

<button>Clicky</button>

代码笔:http://codepen.io/anon/pen/Vaadao

Answer 1

好吧，在摆弄了一段时间之后，我想出了一个我认为可以接受的解决方案，即使用一个关键帧声明来驱动两个方向的动画。这样做的关键是通过重绘强制浏览器本质上重置，如下所述:https://css-tricks.com/restart-css-animation/ (感谢 Jacob Gray 发布该引用资料)。
一旦我开始使用重置，我使用 javascript(是的，这需要 javascript)在动画返回时添加相反的方向(这可以在一个单独的类中，只需添加那个 className)。
而且，它有效。我现在可以使用一个关键帧声明在两个方向上设置动画。非常时髦，并且极大地减少了 css 代码。

window.addEventListener("load", function() {
  var movedOver = false;
  var direction = "";

  document.querySelector("button").addEventListener("click", function() {
    var el = document.querySelector(".one");

    el.classList.remove("do-the-slide");
    el.offsetWidth = el.offsetWidth;

    if (direction === "toRight") {
      direction = "toLeft";
      el.style.animationDirection = "reverse";

    } else {
      direction = "toRight";
      el.style.animationDirection = "";
    }

    el.classList.add("do-the-slide");

  });

});

.container {
  position: absolute;
  perspective: 800px;
  >div {
    position: absolute;
    padding: 20px;
    text-align: center;
    width: 100px;
  }
  >div.do-the-slide {
    animation: moveOver 1s ease-in-out;
    animation-fill-mode: forwards;
  }
  >.one {
    background: red;
  }
}

button {
  margin-top: 100px;
}

@keyframes moveOver {
  from {
    transform: translate3d(0px, 0, 0);
  }
  20% {
    transform: translate3d(-20px, 0, 0);
  }
  80% {
    transform: translate3d(120px, 0, 0);
  }
  to {
    transform: translate3d(100px, 0, 0);
  }
}

<div class="container">
  <div class="one">One</div>
</div>

<button>Clicky</button>

代码笔:http://codepen.io/risingtiger/pen/zqqMpv