Animate.css plugin not working
Question
I'm trying to use the animate.css plugin, which was supposed to be a simple task but I just couldn't get it to work. Where have I gone wrong? This is my code (as simple as it is):
<html>
<head>
<link rel="stylesheet" href="css/animate.css">
<style type="text/css">
.demo{
background-color:red;
width:100px;
height:100px;
margin:300px;
}
</style>
</head>
<body>
<div class="demo animated bounce"></div>
</body>
</html>
And I have saved both the animate.css and the code up top at my desktop.
2 answers
solution1
1 ACCPTED 2017-08-19 18:10:24
according to your code, the "animate.css" file is supposed to be in a folder called "css" , relative to where the .html file is located.
So, if your .html file is on the desktop, you have two options:
- Create a folder on your desktop, called "css" and move "animate.css" into that folder, or...
Edit your code to point to the correct location of the file:
<link rel="stylesheet" href="animate.css">
solution2
1 2017-08-19 18:22:17
Your file structure might not sorted as of now. Use the CDN version of "animate.css"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
Here is a link to a fiddle for the same.
.demo{ background-color:red; width:100px; height:100px; margin:100px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> <body> <div class="demo animated bounce"></div> </body>
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.