CSS3动画未在<；上播放/发生；main>；要素

我试图让

元素从页面加载视口的底部向上滑动

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

我做错了什么

下面是一个重新创建问题的JSFIDLE：

没有任何奇怪或冲突的CSS应用于主元素，如JSFIDLE中所示。对于样式而不是动画，应用于

的CSS如下所示：

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

更新：

---

外部资源并没有加载到JSFIDLE中，下面是一个带有动画CSS（）的版本。现在，JS小提琴正在工作。但在我的实现中它仍然不起作用。这里有一个指向我的实现的链接：

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

更改您的HTML：

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

到

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

---

编辑：你打错了。它的

样式表

不是

样式表

您没有定义任何

@关键帧

，也没有任何

动画

CSS规则。你希望它能起到什么样的作用呢？我想OP忘了包含动画，请更新@Kolink，它是作为外部资源包含在JSFIDLE中的。@Adrift它是JsFiddle中的外部资源尝试查看它时，请更新，谢谢！将它从自动关闭标记更改为打开标记真的可以修复它吗？知道为什么吗？文件是否已损坏或错误？您可以检查document.styleSheets，查看您的样式是否未注册。此外，如果您查看网络面板，您将看到没有对animate.css的请求。是第十八个，还是你用了另一个模版。你真的打错了。它的样式表不是样式表。这与自动关闭标签无关。