"Trouble with Animations: Animate.css not functioning

I've been attempting to implement the animate.css plugin into my code, but for some reason, I just can't seem to get it working properly. Can anyone point out where I may have made a mistake? Here is the code I am using:

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

Both the animate.css file and this code snippet are saved on my desktop.

Answer №1

It seems like your file structure is not currently sorted. To resolve this issue, consider using the CDN version of "animate.css"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

If you want to see an example in action, check out this link to a fiddle.

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

I hope this information proves useful for you.

Answer №2

Based on the code provided, the "animate.css" file should be located within a folder named "css", relative to the location of the .html file.

If your .html file is situated on the desktop, you have two possible solutions:

  1. Create a new folder on your desktop named "css", and then move the "animate.css" file into that directory
  2. Alternatively, modify your code to indicate the accurate location of the file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display just the border of a background image while hiding the content?

The demonstration at this codepen https://codepen.io/Chester/pen/QPoyjN showcases a border animation effect. While it works effectively with a white background, I am interested in making the box's background dynamic. <div class="rainbow"& ...

What strategies can be implemented to stop the downloadthis button in a Quarto HTML report from suddenly moving to the top of the page when

My Quarto HTML report contains numerous download buttons, but each time I click on one, the browser automatically scrolls to the top of the screen. This issue occurs in both Chrome and Firefox. Is there a way to stop or prevent this behavior? For a comple ...

Configuration options for content division in a table cell

Please see the following fiddle which I have attempted: http://jsfiddle.net/9LdEc/ code: html: <div id="CorpDealerSearch"> <div class="row"> <div class="left"> Quarter To Date </div&g ...

Guide to designing a single-row table with varying numbers of columns and ensuring alignment is in place

I currently have a table displayed https://i.sstatic.net/20gZm.png The issue arises when I input large amounts of data, causing the structure to become irregular as depicted above. My query revolves around maintaining proper alignment within the table eve ...

The height of each list item should expand based on the size of the div contained within it

The HTML markup I am working with looks like this: <ul data-role="listview" data-inset="true" class="stuff site-content lists"> <li> <div class="nearby"> 20 </div> <h1> name</h1> </li> ...

IE11 causing overflow issues with flex item set to 0% basis

This straightforward example can be viewed in the following codepen link: http://codepen.io/anon/pen/Mazjyv. It showcases a button that acts as a flex item with a flex-basis set to 0%. While other browsers handle the content within the button container wi ...

Ensure the video fills the entire width of its parent element and adjusts its height accordingly to maintain a 16:9

I am looking to make both videos fill 100% width of their parent element while keeping their aspect ratio intact. The parent element takes up 50% of the window's width, so the videos need to be responsive. I have come across numerous solutions that ...

The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere. Please take a look at this fiddle: I need to remove #Navigation in the CSS declaration below: #Navigation .stretch { ... } so it should look like ...

Navigational highlighting of current page section on a one-page website

I'm struggling with adding a navigation bar feature that will highlight the current section being viewed on my website. All I want is for the currently viewed section to appear bold in the navigation bar. Check out the codepen link: HTML <na ...

Are there any better methods for creating div backgrounds and borders using CSS?

Within my application, there exists a multitude of div elements that share identical backgrounds and borders but vary in size. Having to utilize the same background image for each individual div proves to be highly inefficient, particularly in terms of ba ...

Exploring Android Webview capabilities using HTML 5 geolocation

Utilizing a webview to load a web application, I am using the HTML 5 geolocation API within the page to detect the user's location. While this feature works seamlessly in all browsers and even in an iOS application, I am facing issues getting it to fu ...

the new adjustment has not taken effect on index.php

I have been working on my index.php file and have included various other files as well. Let me show you the structure: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <style type= ...

HTML/ModX styling for selected textboxes

I am looking to enhance the style of my search-box, which is similar to the one on THIS website. While I have tried using :active, the effect only lasts for a brief moment. Currently, my code is heavily influenced by modX terms, but I will still share it h ...

Unusual grey rectangle (similar to a selection tool) found in the top left corner of a contenteditable div on

I recently utilized Vue to create a contenteditable div on my website. However, I encountered an issue where a gray area appeared on the upper left corner when hovering over the div. Oddly enough, this problem only occurred in Chrome, while Safari and Fire ...

Tips on disregarding events within an html table

I have a see-through table with a width set to 100% that houses various HTML content. I am utilizing the table to properly center a particular element on the screen. However, the table is intercepting mouse events and preventing users from clicking on lin ...

Error accessing property 'offsetwidth' of null in Google Maps JavaScript API

I am currently utilizing the Google Maps JS API to showcase a map on my website. However, I am encountering an issue where the website is displaying an empty card and upon inspecting the elements, I came across the error message: Cannot read property &apos ...

What is the best way to apply a class to the initial div using jquery?

I have the following HTML code: <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="main"> <div class="sub"></div> <di ...

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text? HTML <h1 id="hover">Hover over me</h1> <div id="squash"> <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%"> </div&g ...

Create your masterpiece on a rotated canvas

My goal is to draw on a canvas using the mouse, even after rotating and scaling the canvas container. The issue I am facing is that the mouse coordinates get affected by the rotation and scaling, making it difficult to draw correctly. I have tried switch ...

Function not being called when the button is clicked

Here is the code for my button: <button onclick="submitFunction()">Submit</button> This is how my function is defined: function submitFunction() { alert("test"); } I have tried different solutions found online, but none of them seem to ...