CSS3 动画不在 <main> 元素上播放/发生

Question

我正在尝试获取 <main>从页面加载视口(viewport)底部向上滑动的元素。

我正在使用一个已经构建好的动画，但是当我将它应用到元素时，它不起作用。

我做错了什么？

这是一个重现问题的 JSFiddle:http://jsfiddle.net/5hshn/

没有任何奇怪或冲突的 CSS 应用于主要元素，如 JSFiddle 中所见，CSS 用于样式而非动画，应用于 <main>。如下:

main, [role="main"], #main{
    height:400px;
    width:200px;
    margin:0 auto;
    background:red;
    display:block;
}

更新:

外部资源没有在 JSFiddle 中加载，这里是一个带有动画 CSS 的版本(http://jsfiddle.net/5hshn/2/)。现在，JS Fiddle 正在运行。但它在我的实现中仍然不起作用。这是我的实现的链接:https://dl.dropboxusercontent.com/u/270523/help/animate/new.html

Answer 1

你的动画很好。但是，您的包含关键帧和 .animate 类的 animate.css 文件未加载。

更改您的 HTML:

<link rel="stylsheet" href="animate.css" type="text/css" />
to
<link rel="stylesheet" href="animate.css">

或者将 animate.css 的内容移动到您的 new.html 文件样式元素，它应该可以工作。

编辑:你打错了。它的 stylesheet 不是 stylsheet