5秒後にアニメーションクラスを追加して実行する

ウェブサイトでフラッシュカードアニメーションを作成しようとしているので、5秒後にアニメーションクラスを追加しようとしましたが、警告ボックス。ここに私のコードです。5秒後にアニメーションクラスを追加して実行する

$(document).ready(
 
    function(){ 
 
    window.setTimeout(function() { 
 
     $("#webDesign").addClass("animated"); 
 
     $("#webDesign").addClass("bounceOutDown"); 
 
     location.reload(); 
 
    }, 5000); 
 
    });

#webDesign{ 
 
    height:20em; 
 
    background-color:white; 
 
    opacity:0.8; 
 
    border:1.5px solid black; 
 
    border-radius:30px; 
 
}

<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
 
<head> 
 
    <body> 
 
<div id="webDesign" class="card text-center col-md-6 col-md-offset-3"> 
 
     <h2>Web Desgin</h2> 
 
     <h5>Through paying close attention to our customer's needs we make the websites that fit them best.</h5> 
 
     <img style="width:40%;"src="pictures/webDesign.png" /> 
 
    </div> 
 
    </body>

これは、このウェブサイトを使用して初めてです、私は誰が提供して喜んで任意の助けに感謝します。

出典

2016-10-04 Leon Krugliakov

これらのアニメーションクラスをCSSで宣言していないので、明らかに何もしません。 – Stormhashe

これらは別々のCSSファイルにあります。 animate.cssあなたはそれらを見ることができます –

単にアニメーションに遅れを設定するのはなぜですか？ ... https://developer.mozilla.org/en/docs/Web/CSS/animation-delay – LGSon

"アニメーション"クラスのトランジションと "bounceOutDown"の効果を定義する場合は、クラス追加を別々のタイムアウトにする必要があります。そうしないと、両方のクラスが一緒に追加されます。あなたはこれらのクラスを貼り付けますが、そのようにそれを試すことができますしていないとわからない：オペレーション間

$(document).ready(function(){ 
    setTimeout($("#webDesign").addClass, 5000, "animated"); 
    setTimeout($("#webDesign").addClass, 5010, "bounceOutDown"); 
    setTimeout(location.reload, 5020); 
});

10ミリ秒だけで結構です。

出典

2016-10-04 20:33:05

5秒後にアニメーションクラスを追加して実行する

答えて

関連する問題