Animate.css won't work when loaded localy

Question

I have a flask server which hosts a html file for testing. In the head of this html I want to link to a localy stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='animate.min.css') }}"> ). When I open the page I can look in the insepector and see the linked css file (and I can open it) but the style doesn't work (e.g. <h1 class="animated zoomIn">Index Page</h1> won't do the animation). However when I use a file from a CDN (<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">) it works and the effect is be visible.
Why is that? Am I doing something wrong? It's my first time using it so I don't have much experience. Please ask if some information is missing.

Whole code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='animate.min.css') }}">
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">-->
    
    <script src="{{ url_for('static', filename='jquery-3.5.1.min.js') }}"></script>
    </head>

    <body>
        <h1 class="animated zoomIn">Index Page</h1>
    </body>
</html>

Directory structure:

Server
- static
  - animate.min.css
  - jquery-3.5.1.min.js
- templates
  - index.html
- server.py

Note:

The jQuery import is working
I can access the "animate.min.css"-file under "localhost:5000/static/animate.min.css"

Thanks in advance.

https://stackoverflow.com/questions/16351826/link-to-flask-static-files-with-url-for any of this help? — dbramwell, Jul 30 '20 at 09:49
I don't think that's the problem because I have JS files loaded localy which work. (Sorry, havn't mentioned it in the question) — 29thDay, Jul 30 '20 at 09:53
I did. There are no problems or warnings. Not sure if there is an easy way to check if a css file is loaded (other than just using it). I also looked at the network log and there I can see the "animate.min.css" file with the content in the response and a 200 status header. — 29thDay, Jul 30 '20 at 10:35

score 1 · Accepted Answer · answered Jul 30 '20 at 13:24

1

Check if u need a earlier or more current version. Have that issue time to time that only one component gets updated and is now not useable with the other anymore.

answered Jul 30 '20 at 13:24

Makoto Niijima

26
1

1

When thanks. Indeed, I need a earlier version. Thx. – 29thDay Jul 30 '20 at 13:25

score 0 · Answer 2 · answered Aug 04 '21 at 23:20

Had the same problem (Animate.css won't work when loaded locally). Worked fine from CDN but not when I had it in a local directory. I put the CDN link into my browser and copied the entire file to my local folder. Renamed it animate.css and it worked fine. The version I copied was 4.1.1. the version I was using was 3.7.

Thanks to Makoto Niijima.

Animate.css won't work when loaded localy

2 Answers2