CSS动画并非贯穿所有关键帧

Question

BackGround

我一直在努力学习更多关于CSS动画的知识。我主要是使用像animate.css这样的库中的预构建动画。大多数函数工作得很好，我认为我更好地理解了概念和组件。

问题

然而，该库的动画之一，铰链，工作在animate.css网站，但不是在我自己的小提琴。它不会完全失败，但它只会产生3个关键帧移动，而示例站点则是5-6。所以它使用的是动画，而不是我所期望的。

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

我已经测试了我的主要浏览器Chrome v35，和我的电脑上的IE 11的副本，评论指出，FF 30没有显示这个问题。它们还表明，这可能与它是一个依赖项有关，当它被显式定义时，而不是通过animate.css cdn，它在我的浏览器中工作。

研究

为了更好地理解CSS动画，我一直在做一些一般性的研究，这个开发人员指南特别有助于理解基本知识和了解实际示例的工作原理。这些特别有用的结合小提琴，以了解如何修改这些例子。

针对这个问题，我打开源代码查看css动画是如何定义的。代码在github 这里上发布。铰链的特定关键帧如下

@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相关联。为了进行测试，我将代码移植到这个吉斯宾中，并显式地提取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了。这是针对许多年前没有识别脚本标记的浏览器；谢天谢地，我们已经远远超过了这一点。从技术上讲，您甚至不需要“type=”text/javascript与HTML5一起使用，因为它是默认的。

对于延迟，您可能不需要jQuery；CSS动画有延迟选项。尽可能避免setTimeouts。

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

不要使用$(window).load()；只有在加载了整个页面(包括图像)时才会触发。您不需要一个onload函数，只需将脚本标记紧接在关闭体之前。头部的CSS将在HTML之前加载，HTML将加载，然后Javascript将启动。我还建议将jQuery移至内联脚本的正上方，否则会延迟页面加载。