CSSを使用して一定の時間要素を非表示にする方法はありますか？

Question

ボタンを10分間隠す必要があります。 CSSでこれを行うことはできますか？

私はCSSを少し知っていますが、それほどよくはありません。私はこのコードを起動することができると思いますが、この後、私は何をするか分からない：

#button { 
     animation:delay; 
} 

Answer 1

Javascriptのアプローチ

あなたはJavascriptを介してこれを扱うに反対していますか？

それがすでに隠されたと仮定しsetTimeout()機能を使用して行うことは些細なことになります。

<!-- Your initially hidden button --> 
<button id='button' style='display: none;'>Click me!</button> 
<!-- Your script to display your button after 10 minutes --> 
<script> 
    // setTimeout will trigger a function after a specified delay (in milliseconds) 
    setTimeout(function(){ 
     // When your timeout has finished, find your button and show it 
     document.getElementById('button').style.display = 'block'; 
    }, 10 * 6000); 
</script> 

あなたはsee a working example of this hereをすることができますし、5秒の遅延を使用して以下に示す：

純粋なCSSのアプローチ

あなたは、あなたの最初の記事で示された考え方に似て適切な遅延と一緒にCSS animationを作成することによって、これを達成することができる場合があります

#button { 
    /* Initial value (hidden through opacity) */ 
    opacity: 0; 
    /* Various cross-browser declarations for your animation */ 
    -webkit-animation: delayedShow 0.1s forwards; 
    -moz-animation: delayedShow 0.1s forwards; 
    -ms-animation: delayedShow 0.1s forwards; 
    -o-animation: delayedShow 0.1s forwards; 
    animation: delayedShow 0.1s forwards; 
    /* Your delay (in this case 600 seconds) */ 
    animation-delay: 600s; 
} 
/* Your animation declaration (transitions from opacity of 0 to 1) */ 
@keyframes delayedShow { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

これは非表示と示すに隠さ0からあなたの要素を移行するためopacityプロパティを使用しています1を10分（600秒）遅延させた後に行う。さらに、forwardsプロパティを使用すると、アニメーションが完了した後でもトランジションの最終値が維持されます。

することはできsee an example of this in action hereと同様に以下に示す：

注目に値する

これらのアプローチの両方が、純粋にクライアント側のコードなので、彼らはページが更新されないことを要求またはその時間中にポストバックすると、タイマーがリセットされます。これがあなたのニーズに合わない場合は、「タイマー」がいつ行われたかを判断してボタンをそのように表示するために、サーバーサイドのアプローチを使用する必要があります。

Answer 2

遅延時間を追加しようとしましたか？

animation-delay: 10s;