OS-Animation not working?

Question

I am very confused right now. I've used Os-animation before and I even copied the exact code from my other use of it, but I cannot get it to work on this page. Here is my HTML/CSS:

html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        background-color: #4074A0;
        font-family: 'Open Sans', sans-serif;
        border: none;
        outline: none;
        box-shadow: none;
    }
    
    * {
        outline: none;
        border: none;
        box-shadow: none;
        text-shadow: none;
    }
    
    main {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
    }
    
    p {
        text-align: center;
        font-size: 250%;
        width: 100%;
        color: white;
        text-transform: uppercase;
        text-shadow: 0px 3px #098FA8;
    }

<!DOCTYPE html>
    <html lang="">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Animation Testing</title>
        <link rel="stylesheet" href="style.css">
        <link href="css/animate.css" rel="stylesheet" />
        <link href="css/waypoints.css" rel="stylesheet" />
    </head>
    
    <body>
        <main class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="0s">>
                <p>Hello!</p>
        </main>
    </body>
    
    </html>

So, I am trying to get the 'Hello!' text to bounceIn from the top, I have previously done this and have even copied the code from that old document, however, it doesn't seem to want to work on this one.

I've done some looking online but there doesn't seem to be much about this topic.

Any help is appreciated! Thank you.

OS-Animation not working?

0 Answers0