Animate.css - 它是如何工作的？如何使其自動工作？

Question

我試圖從https://daneden.me/animate/到我的網站實施bounceinUp。

而不是點擊按鈕，我試圖把它放在div框中，會在2-3秒後自動完成上述操作。

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

我想這就是雖然它沒有顯示在網頁上（和我中搜索關於JavaScript的沒有任何來自教程）的JavaScript。

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

    </script> 

無論如何，當我這樣做時，它什麼都不做。我想知道我做錯了什麼？我很抱歉，如果這聽起來很容易的問題，我剛開始學習HTML和JavaScript。

由於提前，

Answer 1

這裏是你的代碼的小提琴 - http://jsfiddle.net/yd79L/1/ 您的問題是，你忘了調用該函數創建後。另外請記住，如果你想要一個函數去「循環」 - 它應該從

自己調用自己也在你的代碼中你只有（x）作爲函數的參數，你需要指定一個類的名字要使用

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');