Question

BackGround

我一直在努力了解有关CSS动画的更多信息。我主要使用animate.css等图书馆的预制动画。大多数功能都很好用，我想我会更好地理解这些概念和组件。

问题

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

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

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

研究

我一直在进行一般性研究以更好地理解CSS动画，特别是developer guide有助于理解基础知识并了解实例如何工作。这些与小提琴一起特别有用，可以看看对这些例子的修改是如何起作用的。

更具体地针对这个问题，我拉开了源代码，看看如何定义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引用。我对新设置的行为与旧版本相同。

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了。那是多年前没有识别脚本标签的浏览器;谢天谢地，我们已经过去了。从技术上讲，你甚至不需要＆＃39;输入=＆＃34; text / javascript＆＃34;＆＃39;使用HTML5，因为它是默认值。

你可能不需要jQuery来延迟; CSS动画有一个延迟选项。尽可能避免使用setTimeouts。

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

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

CSS动画不会通过所有关键帧

BackGround

问题

研究

摘要

修改

1 个答案: