Reputation: 556
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
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
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
Reputation: 51
You've made a mistake here
<link rel-"stylesheet" href="animate.min.css">
It should be = sign after rel
Upvotes: 1