CSS3 动画未在 <main> 元素上播放/发生答案

【问题标题】：CSS3 animation not playing / happening on <main> elementCSS3 动画未在 <main> 元素上播放/发生
【发布时间】：2013-05-01 04:54:50
【问题描述】：

我试图让<main> 元素从页面加载的视口底部向上滑动。

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

我做错了什么？

这是一个重现问题的 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

【问题讨论】：

标签： css

【解决方案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

【讨论】：

将其从自闭合标签更改为打开标签真的可以解决问题吗？知道为什么吗？文件是否损坏或错误或什么？
您可以检查您的 document.styleSheets 并查看您的样式未注册。此外，如果您查看 Network 面板，您将看到没有对 animate.css 的请求。是 8 还是您使用不同的 mimetype 提供服务。
您实际上打错了字。它的样式表不是样式表。它不是关于自我结束标签。