CSS动画方向没有像我预期的那样工作

N.B.对于我实际使用的（更复杂的）设置，我不能使用

CSS转换。我认识到
CSS转换
将是一个
下面例子中的完美解决方案

我在这方面有点麻烦

animation-direction: reverse

我以前从未使用过，但似乎没有按照我预期的方式运行

解决我的问题最简单的方法是编写两个CSS
@关键帧
动画，并使用其中一个

但是为了经济和优雅，我想使用一个动画，向前或向后播放

下面这个例子展示了我试图达到的效果

加载页面时，按任意一个按钮都将触发所需的动画

但是，按下一个按钮后，动画不再运行，只显示正向或反向动画的结束帧

我做错了什么

工作示例：


constsquare=document.querySelector（'.square'）；
const buttonOutbound=document.querySelector（'button.outboundButton'）；
const buttonReturn=document.querySelector（'button.returnButton'）；
addEventListener（'click'，（）=>{
square.className='square'；
square.classList.add（'outbound'）；
}，假）；
buttonReturn.addEventListener（'单击'，（）=>{
square.className='square'；
square.classList.add（'return'）；
}，假）
.square{
宽度：100px；
高度：100px；
利润率：12像素；
背景色：红色；
变换：translateX（0）比例（1）；
}
.square.outbound{
动画：animateSquare 1s线性法线向前；
}
.square.return{
动画：animateSquare 1s线性反向前进；
}
@关键帧animateSquare{
100% {
背景颜色：蓝色；
变换：translateX（200px）标度（0.5）；
}
}

出站动画
返回动画
浏览器认为该动画已完成，因此它不会重新启动动画。要重新启动动画，您需要先删除该类，然后重新添加该类。但是，要使浏览器识别此更改，您需要添加一点延迟。即使超时为0，添加setTimeout也会起作用，因为js是单线程的


constsquare=document.querySelector（'.square'）；
const buttonOutbound=document.querySelector（'button.outboundButton'）；
const buttonReturn=document.querySelector（'button.returnButton'）；
addEventListener（'click'，（）=>{
square.classList.remove（'return'）；
square.classList.remove（'outbound'）；
设置超时（（）=>{
square.classList.add（'outbound'）；
}, 0) 
}，假）；
buttonReturn.addEventListener（'单击'，（）=>{
square.classList.remove（'return'）；
square.classList.remove（'outbound'）；
设置超时（（）=>{
square.classList.add（'return'）；
}, 0) 
}，假）
.square{
宽度：100px；
高度：100px；
利润率：12像素；
背景色：红色；
变换：translateX（0）比例（1）；
}
.square.outbound{
动画：animateSquare 1s线性法线向前；
}
.square.return{
动画：animateSquare 1s线性反向前进；
}
@关键帧animateSquare{
100% {
背景颜色：蓝色；
变换：translateX（200px）标度（0.5）；
}
}

出站动画
返回动画
我从笔记本电脑屏幕上开始思考这个问题，并意识到。。。我最初的设置中缺少的是一个附加的静态类，它描述了
.square
动画运行后
.outbound
的表示状态：

.square.outbounded {
  background-color: blue;
  transform: translateX(200px) scale(0.5);
}

（N.B.不需要相应的静态类，在
.return
动画运行后描述
.square
的状态，因为类将描述的表示状态已经在
.square
的初始样式中描述过了）


工作示例（添加了
.outbound
类）


constsquare=document.querySelector（'.square'）；
const buttonOutbound=document.querySelector（'button.outboundButton'）；
const buttonReturn=document.querySelector（'button.returnButton'）；
buttonOutbound.addEventListener（'单击'，（）=>{
square.className='square outbound'；
设置超时（（）=>{
square.classList.add（'outbounded'）；
square.classList.remove（'outbound'）；
}, 1000);
}，假）；
按钮返回。addEventListener（'单击'，（）=>{
square.className='square return'；
设置超时（（）=>{
square.classList.remove（'return'）；
}, 1000);
}，假）
.square{
宽度：100px；
高度：100px；
利润率：12像素；
背景色：红色；
变换：translateX（0）比例（1）；
}
.square.outbound{
背景颜色：蓝色；
变换：translateX（200px）标度（0.5）；
}
.square.outbound{
动画：animateSquare 1s线性法线向前；
}
.square.return{
动画：animateSquare 1s线性反向前进；
}
@关键帧animateSquare{
100% {
背景颜色：蓝色；
变换：translateX（200px）标度（0.5）；
}
}

出站动画
Return animation
非常感谢您的尝试，@AhsanNaveed，但我不确定这是否有效，它是否（？）Rounin它似乎对我有效。您面临的问题是什么？它第一次设置动画，之后不再设置动画。在堆栈溢出上运行上述代码段（使用“运行代码段”按钮）对我来说似乎是正确的。我在《勇敢》中对其进行了一次旋转，您是对的-它在那里工作得更好。（虽然当方块在右边，你按下右边的按钮时，会有一点样式化的内容闪现。）但是——我承认你可能还没有看到这一点——它在Firefox中不起作用。对我来说，关键是当我意识到，
.outbound
类本身