vik1245
vik1245

Reputation: 556

CSS Animation Issue with Image

I have the following code which has a problem (See below).

<!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>

The main.css file is shown here

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

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

    #page {
        margin: 0px auto;
    }

I am using the daneden animate.css file (https://daneden.github.io/animate.css/) which has a CSS file (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) full of animations.

Now, the duck sits in the middle of the page, but doesn't animate. It simply doesn't work.

Any solutions? Thanks, Dave.

Upvotes: 0

Views: 208

Answers (3)

Ruhul Amin
Ruhul Amin

Reputation: 1

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

is not correct. Please add:

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

Please replace with rel= after rel-.

Upvotes: 0

TipuZaynSultan
TipuZaynSultan

Reputation: 783

There should be rel="stylesheet";

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

Note that... The very first time you load the page you won't find any animation because the Image takes a little time to load. And by the time it loads the animation is over. But after that it will cache the image and you will see the animation just fine.

For this case Use: alt="The Duck" Attribute for your image... Then for first time load you can see the text animated.

Upvotes: 0

Mario V.
Mario V.

Reputation: 51

You've made a mistake here

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

It should be = sign after rel

Upvotes: 1

Related Questions