CSS 图片动画问题

Question

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

<!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/) which has a CSS file (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css)。

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

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

Answer 1

你这里弄错了

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

rel后面应该是=号

Answer 2

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

不正确。请添加：

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

rel-后请替换为rel=。

Answer 3

应该有rel="stylesheet"；

Fiddle: https://jsfiddle.net/ypdahLtt/1/

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

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

CSS 图片动画问题

CSS Animation Issue with Image

html

css

animation

css-transitions