Animate.css - How does it work? How to make it work automatically?

Question

I'm trying to implement bounceinUp from https://daneden.me/animate/ to my website.

Instead of clicking on the button, I'm trying to put it in div box that will automatically do the above after 2-3 seconds.

HTML

<div class="" id="animateTest">
<p style="opacity: 0.8;" data-test="bounceinUp">Testing</p>
</div>

CSS

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
    }

    80% {
        -webkit-transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes bounceInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateY(-30px);
    }

    80% {
        -moz-transform: translateY(10px);
    }

    100% {
        -moz-transform: translateY(0);
    }
}

@-o-keyframes bounceInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -o-transform: translateY(-30px);
    }

    80% {
        -o-transform: translateY(10px);
    }

    100% {
        -o-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    -moz-animation-name: bounceInUp;
    -o-animation-name: bounceInUp;
    animation-name: bounceInUp;
}
#animateTest {
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: .2s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-delay: .2s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: 1s;
    -ms-animation-delay: .2s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    -o-animation-duration: 1s;
    -o-animation-delay: .2s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

I think this is the javascript though it's not displayed on the page (and there are not tutorial from what I searched in regards to javascript).

<script>
    function testAnim(x) {
        $('#animateTest').removeClass().addClass(x);
        var wait = window.setTimeout( function(){
            $('#animateTest').removeClass()},
            1300
        );
    }

    </script>

Anyway, when I do this, it does nothing to it. I was wondering what I did wrong? I'm sorry if this sounds very easy question, I'm just starting out with learning HTML and javascript.

Thanks in advance,

Answer 1

here is the fiddle of your code - http://jsfiddle.net/yd79L/1/ Your problem is that you forgot to call the function after you created it. Also remember that if you want a function to go 'cycles' - it should call itself from within

Also in your code you had only (x) as the argument for a function and you need to specify the name of a class that you want to use

    function testAnim(x) {
    $('#animateTest').removeClass().addClass(x);
    var wait = window.setTimeout( function(){
        $('#animateTest').removeClass(x);
        }, 1300
    );
window.setTimeout(function(){ // this code calls the function and makes it cycle
testAnim(x);
}, 2000 );
}

testAnim('bounceInUp');