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

Question

背景

我一直在努力学习更多有关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,内置在外部资源管理中.为了测试,我将代码移植到这个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 动画有一个延迟选项。尽可能避免 setTimeouts。

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

不要使用 $(window).load(); 仅当整个页面（包括图像）加载时才会触发。您不需要 onload 函数，只需将脚本标记放置在关闭正文之前即可。head 中的 CSS 将在 HTML 之前加载，HTML 将加载，然后 Javascript 将触发。我还建议将 jQuery 移动到内联脚本的正上方，否则会延迟页面加载。