是否可以排队 CSS 动画（示例）？答案

【问题标题】：Is it possible to queue CSS animations (example)?是否可以排队 CSS 动画（示例）？
【发布时间】：2014-12-06 11:12:29
【问题描述】：

我目前使用这个 JS 动画插件：http://www.2meter3.de/code/hoverFlow/，我喜欢的独特结果是橙色示例。据我了解 CSS 过渡只能做黄色的例子。

有没有办法完全用 CSS 复制它？

如果没有，那么有没有办法使用 CSS 过渡，但由 JS (jQuery) 使用相同的原理控制（两者的完美结合）？

也许这可以帮助我的情况：http://cortys.de/cssAnimate/

【问题讨论】：

这可能会帮助你jsfiddle.net/victor_007/hrnvadoz
所以你喜欢元素一直动画到预定义的结束位置，即使鼠标已经离开？（在野外的大多数环境中，最理想的解决方案实际上是执行黄色行为（使用.stop()）），如果元素失去悬停并从该位置返回到其原始位置，则会停止动画。这仅在 CSS 中是可行的。只是说。
黄色不是很好，你不能“玩”元素，很无聊恕我直言。橙色 - 如果处理得当 - 让我想起了 flash 菜单，如果你用鼠标扫描它，它看起来很漂亮。

标签： javascript jquery css css-transitions css-animations

【解决方案1】：

据我所知，仅靠 CSS 是不可能的。

make the animation run to the end on hover 有一个技巧，可以在元素上运行另一个不可见的动画，但如果你想将其动画化，这将不起作用。

使用一点点 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/

【讨论】：

谢谢，这（更改类，使用 setTimeout）是否仍然比仅使用 jQuery 动画产生更好的性能？
@Firsh：是的，CSS 动画是在浏览器本身中实现的，而 jQuery 动画是在浏览器中运行的 Javascript 中实现的。但是，您还应该考虑浏览器支持，例如IE 8 不支持转换。