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

我希望一个div在单击按钮时向右设置动画，然后在单击同一按钮时再次向左设置动画。我只想使用一个

关键帧

声明。这可以通过交换类来实现吗

我曾在CodePen中尝试过这一点，但不幸的是，div在第一次动画后会恢复，然后拒绝第二次动画

我不使用CSS转换，因为我希望能够使用CSS动画的功能，比如反弹效果

window.addEventListener（“加载”，函数（）{
var movedOver=false；
document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
var buttonEl=document.querySelector（“.one”）；
如果（移动多佛）{
Buttonnel.classList.remove（“做幻灯片”）；
buttonnel.classList.add（“向后滑动”）；
}否则{
Buttonnel.classList.remove（“向后滑动”）；
Buttonnel.classList.add（“做幻灯片”）；
}
});
});
.container{
位置：绝对位置；
透视图：800px；
>div{
位置：绝对位置；
填充：20px；
文本对齐：居中；
宽度：100px；
}
>副驾驶做滑梯{
动画：移动1s，释放；
}
>后坐式驾驶室{
动画：移动1s反向放松；
}
>.一{
背景：红色；
}
}
钮扣{
边缘顶部：100px；
}
@关键帧移动{
从{
转换：translateX（0px）；
}
到{
转换：translateX（100px）；
}
}

一个
单击y
也许您正在寻找
转发
，但即使如此，仍需要进行转换以使其变得简单


p span{
显示：内联块；
过渡：1s；
}
悬停跨度{
动画：1s向前移动；
}
@关键帧移动{
到{
转换：translateX（100px）；
}
span
<代码> < p> >，在经过了一段时间之后，我想出了一个可以接受的解决方案：使用一个关键帧声明来驱动动画的两个方向。这个关键是通过重新绘制来强制浏览器基本复位，如这里所解释的：（谢谢Jacob Gray张贴该引用）。
一旦我完成了重置，我就使用javascript（是的，这需要javascript）在设置动画时添加反向（这可以在单独的类中，只需添加该类名）

现在，我可以用一个关键帧声明在两个方向上制作动画。非常时髦，并且大大减少了css代码


window.addEventListener（“加载”，函数（）{
var movedOver=false；
var方向=”；
document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
var el=document.querySelector（“.one”）；
el.classList.remove（“做幻灯片”）；
el.offsetWidth=el.offsetWidth；
如果（方向==“toRight”）{
direction=“toLeft”；
el.style.animationDirection=“反向”；
}否则{
方向=“toRight”；
el.style.animationDirection=“”；
}
el.classList.add（“做幻灯片”）；
});
})；
.container{
位置：绝对位置；
透视图：800px；
>div{
位置：绝对位置；
填充：20px；
文本对齐：居中；
宽度：100px；
}
>副驾驶做滑梯{
动画：移动1s，轻松进出；
动画填充模式：正向；
}
>.一{
背景：红色；
}
}
钮扣{
边缘顶部：100px；
}
@关键帧移动{
从{
变换：translate3d（0px，0，0）；
}
20% {
变换：translate3d（-20px，0，0）；
}
80% {
变换：translate3d（120px，0，0）；
}
到{
变换：translate3d（100px，0，0）；
}
}

一个
Clicky
我根据这篇文章和这里的css技巧文章制作了一支钢笔

HTML

<h2>Single keyframe-track burger collection</h2>
<p>(each span uses only one track to play for- and backwards)</p>

<div class="wrapper">
  <div class="cell">
    <h3>Default</h3>
    <div>
      <button class="burger">
        <span class="burger__bar"></span>
        <span class="burger__bar"></span>
        <span class="burger__bar"></span>
      </button> 
    </div>
  </div>

  <div class="cell">
    <h3>Merge</h3>
    <div>
      <button class="burger burger--merge">
        <span class="burger__bar"></span>
        <span class="burger__bar"></span>
        <span class="burger__bar"></span>
      </button> 
    </div>
  </div>

  <div class="cell">
    <h3>Rotate</h3>
    <div>
      <button class="burger burger--rotate">
        <span class="burger__bar"></span>
        <span class="burger__bar"></span>
        <span class="burger__bar"></span>
      </button> 
    </div>
  </div>

  <div class="cell">
    <h3>Spin</h3>
    <div>
      <button class="burger burger--spin">
        <span class="burger__bar"></span>
        <span class="burger__bar"></span>
        <span class="burger__bar"></span>
      </button> 
    </div>
  </div>

</div>

Javascript

burgers = document.querySelectorAll('.burger');
for (let i = 0; i < burgers.length; i++) {
     burgers[i].addEventListener("click", function(){
       this.classList.remove("animate");

       var bars = this.querySelectorAll('.burger__bar');
       for (let i = 0; i < bars.length; i++) {
         // Reset span animations - https://css-tricks.com/restart-css-animation/
         void bars[i].offsetWidth;
       }

       if (this.classList.contains("open")){
         this.classList.remove("open");
         this.classList.add("close");
       } else {
         this.classList.remove("close");
         this.classList.add("open");
       }  
       this.classList.add("animate");
    });
};

burgers=document.querySelectorAll（'.burger'）；
for（设i=0；i
这就是您正在使用的动画吗？因为如果是这样，过渡会容易得多。我同意，过渡会更容易。但我最终想为动画添加各种方面，如反弹效果，这是我无法仅使用过渡的。感谢Jacob Gray提供的参考链接，您可能会发现本文很有用。这是关键所在解决这个难题：）动画的前进确实是关键。感谢大家的提醒。这里我们还想解释一下为什么您提出的解决方案比原始帖子中提供的原始源代码更有效。请按照此指南改进您的答案
burgers = document.querySelectorAll('.burger');
for (let i = 0; i < burgers.length; i++) {
     burgers[i].addEventListener("click", function(){
       this.classList.remove("animate");

       var bars = this.querySelectorAll('.burger__bar');
       for (let i = 0; i < bars.length; i++) {
         // Reset span animations - https://css-tricks.com/restart-css-animation/
         void bars[i].offsetWidth;
       }

       if (this.classList.contains("open")){
         this.classList.remove("open");
         this.classList.add("close");
       } else {
         this.classList.remove("close");
         this.classList.add("open");
       }  
       this.classList.add("animate");
    });
};