Javascript 是否可以将CSS动画排队（示例）？

我目前使用这个JS动画插件：我喜欢的独特结果是橙色的例子。据我所知，CSS转换只能执行黄色示例

有没有一种方法可以完全用CSS来复制这一点

如果没有，那么有没有一种方法可以使用CSS转换，但是由JS（jQuery）使用相同的原则控制（两个世界的良好混合）

---

也许这会对我的情况有所帮助：

据我所知，单凭CSS是不可能做到的

在元素上运行另一个不可见动画有一个技巧，但如果要将其设置回动画，则该技巧不起作用

使用一点Javascript，您可以在鼠标悬停时向元素添加一个类，然后在动画完成时删除该类：

$('div').mouseenter(function(){
  $(this).addClass('animate');
}).on('transitionend', function(){
  $(this).removeClass('animate');
});

演示：

但是，似乎转换结束事件并不总是被触发，因此元素可能会被添加到其中的类卡住。您可以使用超时来删除该类：

$('div').mouseenter(function(){
  var e = $(this);
  e.addClass('animate');
  window.setTimeout(function(){
    e.removeClass('animate');
  }, 300);
});

---

演示：

当元素一直动画到预定义的结束位置时，即使鼠标离开，这可能会帮助您，让您喜欢吗？（在野外的大多数环境中，最理想的解决方案实际上是执行黄色的行为（使用

.stop（）

），如果元素松开悬停并从该位置返回到其原始位置，则停止动画。这在CSS中是可行的。只是说说而已。黄色不是很好，你不能“玩”这些元素，我觉得很无聊。橙色——如果处理得当——会让我想起flash菜单，如果你用鼠标扫描的话，它看起来很漂亮。谢谢，这（更改类，使用setTimeout）会比只使用jQuery制作动画产生更好的性能吗？@Firsh：是的，CSS动画是在浏览器本身中实现的，而jQuery动画是在浏览器中运行的Javascript中实现的。但是，你也应该考虑浏览器支持，例如IE 8不支持转换。