CSS 动画没有遍历所有关键帧

Question

背景

我一直在努力学习更多关于 CSS 动画的知识。我一直主要使用来自 animate.css 等库的预构建动画。 .大多数功能都很好用，我想我更好地理解了概念和组件。

问题

但是，该库中的动画之一铰链可以在 animate.css 网站上运行，但不能在我自己的网站上运行 fiddle .它并没有完全失败，但它只进行了 3 个关键帧移动，而示例站点进行了 5-6 个。所以它使用的动画不是我期望的那样。

我责怪标题中的关键帧，因为在视觉上它似乎没有摇摆。我将此归因于关键帧不起作用，但这可能过于简单化了，或者我可能误解了这个问题，所以请注意，这是该假设的来源。

我已经使用我的主要浏览器 Chrome v35 和我计算机上的 IE 11 副本对此进行了测试，评论员指出 FF 30 没有出现此问题。他们还表明，这可能与它是一个依赖关系有关，当它被明确定义时，而不是通过 animate.css cdn 引入，它在我的浏览器中工作。

研究

我一直在做一般研究以更好地理解 CSS 动画，这 developer guide特别是有助于理解基础知识和查看实例如何工作。这些与 fiddle 结合使用特别有用，可以了解对这些示例的修改如何工作。

为了更具体地说明这个问题，我打开了源代码以查看 css 动画是如何定义的。代码发布在github上here .下面是铰链的具体关键帧

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    -ms-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    -ms-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    -ms-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

在查看我的样本 fiddle 与定义的关键帧相比时，它似乎只转换到每个位置一次，而不是像我预期的那样来回移动，就像它在 animate.css 页面上所做的那样。

我还验证了我正在添加与工作页面相同的类，并在 js 中添加它。我还从 animate.css 主页复制了样式并验证我有相同的 js 依赖项，看看这是否会有所不同，但这些都没有帮助。

总结

什么会导致 CSS 动画无法正确地通过它的所有关键帧，以及什么会使这个特定的铰链动画在我的 fiddle 示例中从一个页面到另一个页面的表现不同？

编辑

我测试了一些想法。 @Cbroe 提出了一个关于 jquery 的 document.ready 行为的问题，并建议使用 window.load 代替进行测试。我还想看看它是否链接到内置于外部资源管理中的 jsfiddles。为了测试，我将代码移植到这个 jsbin并明确引入 cdn 引用。我在新设置中得到了与旧设置相同的行为。

Answer 1

缩小版的 animate.css 有问题。

我改变了:

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">

收件人:

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.css">

它在 Chrome 和 Safari 中工作。奇怪的。缩小器一定有问题吗？

http://jsbin.com/luvixoxu/1/edit

---

一些旁注。您不再需要在 Javascript 中使用 CDATA。那是针对多年前不识别脚本标签的浏览器；值得庆幸的是，我们已经过去了。从技术上讲，HTML5 甚至不需要“type="text/javascript"'，因为它是默认设置。

您可能不需要 jQuery 来延迟； CSS 动画有一个延迟选项。尽可能避免设置超时。

http://jsbin.com/pumigeqo/1/edit

不要使用 $(window).load();这只会在整个页面(包括图像)加载后触发。您不需要 onload 函数，只需将脚本标记放在紧挨着结束主体之前。头部的 CSS 将在 HTML 之前加载，HTML 将加载，然后 Javascript 将被触发。我还建议将 jQuery 移动到内联脚本的正上方，否则会延迟页面加载。