反转正在进行的CSS动画

我有一个盒子，它会变为蓝色，然后在单击时变为绿色。 如果在完成第一个动画之前再次单击，我希望长方体反转其淡入淡出方向，并从蓝绿色变回蓝色

我希望避免使用过渡*，因为当用多个过渡替换关键帧*时，每个过渡之间都有一个延迟，因为浏览器需要一秒钟来确认新的CSS类

在这个更复杂的例子中，你可以看到我所说的延迟是什么意思：

• 由于附加类而导致延迟：
• 不因动画而延迟：

这可能吗？我的尝试如下，但没有达到预期效果

另外，我也做了一些尝试，但这是一个非常新的东西，似乎有它自己的一套限制，尽管它可以反转动画

$（'.box'）。单击（函数（）{
if（$（this）.hasClass（'colored'））{
if（$（this）.hasClass（'reverse'））{
$（this.removeClass（'reverse'）；
}否则{
$（this.addClass（'reverse'）.removeClass（'colored'）；
}
}否则{
$（this.addClass（'colored'）；
}
});
.box{
背景色：红色；
宽度：200px；
高度：200px；
}
.有色人种{
-webkit动画：彩色4s线性转发；
}
.反向{
-webkit动画：彩色4s线性向后；
}
@-webkit关键帧颜色{
0% {
背景颜色：蓝色；
}
100% {
背景颜色：绿色；
}
}
我认为它可以在没有笨重或延迟的情况下完成（甚至可以像上面那样使用多行JS逻辑），假设它只是更改简单的CSS属性，如背景色

这支笔能达到你想要的效果吗？它只使用jQuery toggleClass方法在框的两个CSS状态之间切换。而且，只需使用更简单的CSS转换，而不必处理关键帧和所有这些事务，它就应该毫不延迟地制作动画，或者口吃很好，并且能够在动画中的任何点来回移动：

更新
我编辑了我的，以重新创建我认为是你想要的效果-这是否更接近你想要的动画外观（减去动画的放松和长度，我的意思是）


HTML

jQuery

$(".box").click(function(){
  $(".line").toggleClass("line-extended");
  $(".box").toggleClass("filled-box");
  $(".inner-box").toggleClass("inner-box-collapsed");
});

不幸的是，CSS动画无法（正确地）按照您需要的方式进行操作。可能需要在JavaScript中获取当前关键帧的近似值，然后动态创建一组分配给元素的新关键帧。例如，请查看本文的“操纵CSS动画”部分：

另一方面，由于您无论如何都无法使用JavaScript，所以您可能需要考虑使用jQuery（加上jQuery UI来动画<代码> ButoButoSudio>代码）。看看这个。
CSS转换可能是一种更简单的方法。正如问题描述中所述，我希望避免使用转换（哦，我在描述中说的是转换，我指的是转换。抱歉，时间还早）而不是动画。当收听“WebKittTransitionEnd”，然后应用新的CSS类来模拟关键帧中的步骤时，每个步骤之间都会有延迟，因为浏览器需要一点时间来确认元素上的新CSS类。这会让整体效果感觉笨拙而不是平滑。我知道Greensock库可以使用JS反转动画–我不确定这对于您尝试执行的操作是否有过大的杀伤力！也许会有帮助：我忘了格林斯托克！这可能有些过分，但确实值得考虑。@Sean实际上说他希望避免CSS转换。明白了，我只是想确保这种方式绝对不适合他的情况，因为它很简单。这可能不是他想要的工作方式，但如果他没有这样尝试，我认为将其视为一种潜在的选择可能会有所帮助。为了这个问题，这个例子被简化了。您可以在通过URL提供的代码笔URL中看到更复杂的用法。：）我明白了，那是我的错。我查看了您提供的代码笔，认为可能不同的动画可以分离为它们自己的元素/转换集，并通过jQuery在checkbox元素中绑定在一起。用这种方式编写更多的HTML，但仍然可以更简单。这当然不是一个糟糕的主意！我喜欢你的第二个例子，但我同意它要复杂得多，但我会给你努力的分数。：）
.box {
  width: 100px;
  height: 100px;
  position: relative;
  border: 6px solid #444444;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background-color: green;
}

.filled-box {
  background-color: green;
}

.inner-box {
  width: 110px;
  height: 110px;
  background-color: white;
  position: absolute;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  margin-top: -55px;
  margin-left: -55px;
}

.inner-box-collapsed {
  width: 0px;
  height: 0px;
  margin-top: 0px;
  margin-left: 0px;
}

.line {
  width: 0px;
  height: 10px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
}

.line-extended {
  width: 55px;
}

.animate {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s; 
}

$(".box").click(function(){
  $(".line").toggleClass("line-extended");
  $(".box").toggleClass("filled-box");
  $(".inner-box").toggleClass("inner-box-collapsed");
});