图像的 CSS 动画问题答案

【问题标题】：CSS Animation Issue with Image图像的 CSS 动画问题
【发布时间】：2015-10-25 20:09:23
【问题描述】：

我的以下代码有问题（见下文）。

<!DOCTYPE html>
<head>
    <title>Duck</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel-"stylesheet" href="animate.css">
    <!-- Tab Title -->
</head>
<body>
    <div>
        <div id = "header">
            <img class = "duck animated zoomIn" src = "https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
        </div>
        <!-- Main Header -->    
    </div>
</body>

此处显示 main.css 文件

        #header {
        padding:10px 0 0 0 ;
    }

    img.duck {
        margin-left: auto;
        margin-right: auto;
        display:block;
    }

    #page {
        margin: 0px auto;
    }

我正在使用 daneden animate.css 文件 (https://daneden.github.io/animate.css/)，其中包含一个充满动画的 CSS 文件 (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css)。

现在，鸭子位于页面中间，但没有动画。它根本不起作用。

有什么解决办法吗？谢谢，戴夫。

【问题讨论】：

@Daemedeor 我喜欢 :)

标签： html css animation css-transitions

【解决方案1】：

你在这里犯了一个错误

<link rel-"stylesheet" href="animate.min.css">

rel 后应该是 = 符号

【讨论】：

-_- 应该看过！不知何故，调试器没有拿起它。谢谢！
发生在每个人身上，很高兴为您提供帮助:-)

【解决方案2】：

应该有rel="stylesheet";

小提琴：https://jsfiddle.net/ypdahLtt/1/

请注意...第一次加载页面时，您不会发现任何动画，因为加载图像需要一点时间。到它加载动画的时候就结束了。但之后它会缓存图像，你会看到动画就好了。

对于这种情况，请使用：alt="The Duck" 属性为您的图像...然后第一次加载您可以看到动画文本。

【讨论】：

【解决方案3】：

<link rel-"stylesheet" href="animate.css">

不正确。请补充：

<link rel="stylesheet" href="animate.css">

请在rel-之后替换为rel=。

【讨论】：