【发布时间】：2014-09-10 02:28:40
【问题描述】：
背景
我一直在努力了解有关 CSS 动画的更多信息。我主要使用来自 animate.css 等库的预构建动画。大多数功能都很好，我认为我更好地理解了概念和组件。
问题
但是，该库中的一个动画，铰链，在 animate.css 网站上工作，但在我自己的 fiddle 中却没有。它并没有完全失败，但它只进行了 3 个关键帧移动，而示例站点进行了 5-6 个。所以它使用的动画不是我所期望的。
我责怪标题中的关键帧，因为在视觉上它似乎没有摆动。我将此归因于关键帧不起作用，但这可能过于简单化，或者我可能误解了这个问题，所以请注意，这就是该假设的来源。
我已经用我的主浏览器 Chrome v35 和我电脑上的 IE 11 副本对此进行了测试，评论者指出 FF 30 没有出现这个问题。他们还表明，这可能与它是一个依赖项有关，当它被明确定义时，而不是通过 animate.css cdn 拉入，它可以在我的浏览器中工作。
研究
我一直在进行一般研究以更好地理解 CSS 动画，这个developer guide 尤其有助于理解基础知识和了解实际示例的工作原理。这些与 fiddles 一起特别有用，可以查看对这些示例的修改是如何工作的。
针对这个问题，我打开了源代码以查看 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;
}
}
在查看我的示例小提琴与定义的关键帧相比时，它似乎只转换到每个位置一次，而不是像我期望的那样来回移动，就像它在 animate.css 页面上所做的那样。
我还验证了我正在添加与工作页面相同的类，并将其添加到 js 中。我还从 animate.css 主页复制了样式，并验证了我有相同的 js 依赖项，看看这是否会有所不同，这些都没有帮助。
总结
什么可能导致 CSS 动画无法正确地通过它的所有关键帧，以及什么会导致这个特定的铰链动画在我的小提琴示例中从一个页面到另一个页面执行不同？
编辑
我测试了更多的想法。 @Cbroe 提出了一个关于 jquery 的 document.ready 行为的问题，并建议使用 window.load 代替进行测试。我还想看看它是否与内置于外部资源管理中的 jsfiddles 相关联。为了测试，我将代码移植到这个jsbin 并显式地拉入cdn 引用。新设置与旧设置的行为相同。
【问题讨论】：
-
直接放置所需的CSS而不是使用animate.min.css似乎效果很好。检查here。因此，作为一种解决方法，您可以考虑这样做。另外，请记住使用浏览器前缀关键帧。对我来说（在 Opera 中），当
@-webkit-keyframe丢失时，我也可以通过变通解决方案获得相同的 3 帧效果。 -
对于这样一个结构良好的问题 +1。拥有所需的一切，例如问题描述、研究、期望和代码。
-
在 Firefox 30.0 中，您的小提琴可以正常工作。你用的是哪个浏览器？
-
@Harry 很棒的评论，这当然是一种解决方法，如果需要，我可以在大多数地方使用。我仍然对为什么这不适用于某些浏览器作为导入感兴趣，希望答案可以包括一些具体的信息。但再次感谢您的 cmets 和小提琴。
-
@OrtomalaLokni 在问题中添加了关于我测试了哪些浏览器的部分。你不必打猎，它是 Chrome 35 和 IE 11。
标签： css css-animations