Html 删除类后保留CSS转换属性

删除修改CSS属性的类后，是否可以保留CSS属性（包括变量）？

问题在下面的代码中。 我想在删除向左滑动方框的类

动画幻灯片后保留青色方框的变换属性。
这是因为，当删除左侧的
动画幻灯片
并将类
动画幻灯片添加到右侧的
类时，我希望新动画从旧动画结束的地方开始

但问题是，当删除
动画幻灯片至左侧时，
变换属性将重置，并在添加该类之前等于其旧值。

注意：我不想将
transform
属性硬编码为0%，因为有很多动画，我正在寻找一种不用JAVASCRIPT自动解决问题的方法

（将代码段结果展开为完整页面，请参见示例）


const-box=document.querySelector（“.animated”）；
函数leftclicked（）{
box.classList.remove（“动画幻灯片向右”）；
box.classList.add（“动画幻灯片向左”）；
}
函数右键单击（）{
box.classList.remove（“动画幻灯片向左”）；
box.classList.add（“右侧动画幻灯片”）；
}
.center{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.动画{
动画持续时间：0.5s；
动画延迟：0s；
动画迭代次数：1；
动画方向：正常；
动画计时功能：放松；
动画填充模式：正向；
}
.动画幻灯片向左{
动画名称：向左滑动；
}
.向右滑动动画{
动画名称：向右滑动；
}
@关键帧向左滑动{
100%{
转换：转换（-150%，-50%）；
}
}
@关键帧向右滑动{
100%{
转换：翻译（50%，-50%）；
}
}

左边
正确的
每次单击CSS关键帧中的左侧和右侧按钮时，都可以设置起始位置，这样当按钮位于左侧并单击右侧按钮时，它首先将位置设置为左侧（0%），然后再设置为右侧（100%）的动画，反之亦然。这样，当单击按钮时，它不会重置回中心


const-box=document.querySelector（“.animated”）；
函数leftclicked（）{
box.style.transform='translate（50%，-50%）；
box.classList.remove（“动画幻灯片向右”）；
box.classList.add（“动画幻灯片向左”）；
}
函数右键单击（）{
box.style.transform='translate（-150%，-50%）；
box.classList.remove（“动画幻灯片向左”）；
box.classList.add（“右侧动画幻灯片”）；
}
.center{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.动画{
动画持续时间：0.5s；
动画延迟：0s；
动画迭代次数：1；
动画方向：正常；
动画计时功能：放松；
动画填充模式：正向；
}
.动画幻灯片向左{
动画名称：向左滑动；
}
.向右滑动动画{
动画名称：向右滑动；
}
@关键帧向左滑动{
100%{
转换：转换（-150%，-50%）；
}
}
@关键帧向右滑动{
100%{
转换：翻译（50%，-50%）；
}
}

左边
正确的
事实证明，在没有JavaScript的情况下创建这样的行为是不必要的。
因为如果CSS类在运行时被替换，我们已经在使用JavaScript了。
因此，解决方案是在删除旧类之后，在添加新类之前，在JavaScript中设置transform属性
我不想使用JavaScript，也不想像注释中提到的那样在CSS中硬编码它。感谢you@EEAH你说得对，很抱歉！我现在对它进行了编辑，以便在CSS关键帧而不是Javascript中发生相同的行为。现在唯一的问题是，当框仍在中间时，当您第一次单击按钮时，它会重置为左侧或右侧。目前我想不出解决这个问题的办法，但也许有人会提出建议。不过，我希望到目前为止我能帮上忙：）谢谢。但正如我在回答中所说的，无论如何都会使用JavaScript。因此，使用JavaScript来实现之前的JavaScript解决方案（在编辑之前）应该是答案，这将非常方便