是否可以对CSS动画进行排队(示例)

Question

我目前使用这个JS动画插件：http://www.2meter3.de/code/hoverFlow/我喜欢的明显结果是橙色的例子。据我所知，CSS转换只能做黄色的例子。

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

如果没有，那么有没有一种方法可以使用CSS转换，但由JS（jQuery）使用相同的原理控制（两个世界的完美结合）？

也许这对我的案子有帮助：http://cortys.de/cssAnimate/

Answer 1

据我所见，仅使用CSS是不可能的。

有一个技巧可以通过在元素上运行另一个不可见的动画来使动画在悬停时运行到底，但如果您想将其设置回动画，则这是行不通的。

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

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

演示：http://jsfiddle.net/Guffa/oq83suw3/

然而，似乎并不总是触发转换结束事件，因此元素可能会因为添加了类而陷入困境。您可以使用超时来删除类：

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

演示：http://jsfiddle.net/Guffa/u3c2knfj/