30秒間クリックしないと、CSSを1回適用して削除してから、反復します。

Question

CodePenは、<div class="someDiv">を30秒間クリックしていない場合にのみ実行するアニメーションです。上のように、誰かがクリックしない私は聞いてるのよ、誰が正しい方向に私を指すことができ、

：

<div class="someDiv"> 
</div> 

30秒..for、このCSSはONCE（適用されます）を$(".someDiv").attr("id", "#theBounce");のように追加して逆の方法で削除します。

クリックをやり直すことに対抗し、30代のためのクリックの欠如は、少なくとも1,5sのためのCSSを適用し、それを削除した後、タイマーを起動するスクリプトを強制することを意味

#theBounce { 
    background-color:red; 
    width:50px; 
    height:50px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:5%; 

    -moz-animation: bounce 1.5s infinite; 
    -webkit-animation: bounce 1.5s infinite; 
    animation: bounce 1.5s infinite; 
} 

@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -moz-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -moz-transform: translateY(-30px); 
    transform: translateY(-30px); 
    } 
    60% { 
    -moz-transform: translateY(-15px); 
    transform: translateY(-15px); 
    } 
} 
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-30px); 
    transform: translateY(-30px); 
    } 
    60% { 
    -webkit-transform: translateY(-15px); 
    transform: translateY(-15px); 
    } 
} 
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -moz-transform: translateY(-30px); 
    -ms-transform: translateY(-30px); 
    -webkit-transform: translateY(-30px); 
    transform: translateY(-30px); 
    } 
    60% { 
    -moz-transform: translateY(-15px); 
    -ms-transform: translateY(-15px); 
    -webkit-transform: translateY(-15px); 
    transform: translateY(-15px); 
    } 
} 

。ここで私のグーグルのスキルが欠点であるかもしれませんが、私はこの作業をどうやって行うのか分かりません。 タイミング/リセット部分のリセットですが、実際には分かりません。

リンク、アイデア、ご提案。私はそれのすべてのために幸せになるでしょう。ありがとう。

Answer 1

setTimeoutを使用することをおすすめします。

文書のロード時に、一定のミリ秒後にコンテンツを追加するタイマーと同じ変数を定義して、setTimeoutを開始します。次に、タイマー変数を新しいミリ秒単位で新しいsetTimeoutに再定義します。

var myTimer; 
myTimer = setTimeout(function(){ /*do stuff after 3 seconds*/ }, 3000); 

その後、誰かがタイマーを停止するために何かをしている場合、あなたはでタイマーを停止することができます

clearTimeout(myTimer); 

ここでは例です：

(function() { 
 
    var myTimer, 
 
     announce = document.getElementById("announcement"), 
 
     button = document.getElementById("stopIt"); 
 
    function firstTimer() { 
 
     announcement.innerHTML = ''; 
 
     myTimer = setTimeout(function() { 
 
      populateContent(); 
 
     }, 500); 
 
    } 
 
    function populateContent() { 
 
     announcement.innerHTML = 'push the button!!'; 
 
     myTimer = setTimeout(function() { 
 
      firstTimer(); 
 
     }, 500); 
 
    } 
 
    button.addEventListener('click', function() { 
 
    clearTimeout(myTimer); 
 
    }); 
 
    firstTimer(); 
 
}());

#announcement { 
 
    border: 1px solid red; 
 
    height: 5ex; 
 
    width: 30%; 
 
}

<div id="announcement"></div> 
 
<button type="button" id="stopIt">Stop!!</button>

Answer 2

私は専門家ではないので、誰かがより良い答えを持っているかもしれませんが、setTこれを行うにはJavascriptのimeout関数が必要だと思います。

HTML：：

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

そのページの最初の例では、ここではテストされていない提案だ、あなたがしたいと思うものに似ているようだ

ライブ例

設定CSSバウンス30秒後には

リセットタイマー

Javascriptを： のvar timeoutIDは、

function setBounce() { 
    timeoutID = window.setTimeout(bounceIt, 30000); 
} 

function bounceIt() { 
    // Code to find the bounce div, apply the CSS style to it, 
    // and then add a new timeout on the CSS to remove the style after 1.5s 

} 

function unbounceIt(bounceTimeoutID) { 
    window.clearTimeout(bounceTimeoutID); 
} 

function resetBounceTimer() { 
    window.clearTimeout(timeoutID); 
} 

うまくいけば、これは右方向