Wie kann ich ein Element für eine bestimmte Zeit mit CSS verstecken?

Question

Ich muss einen Knopf für 10 Minuten verstecken. Kann ich das mit CSS machen?

Ich weiß CSS ein wenig, aber nicht ganz so gut. Ich denke, dass ich diesen Code beginnen, danach aber ich weiß nicht, was zu tun ist:

#button { 
     animation:delay; 
} 

Answer 1

Javascript Ansatz

Sind Sie mit der Handhabung dieses durch Javascript Gegensatz?

Es wäre ziemlich trivial sein, die setTimeout() Funktion zu tun mit vorausgesetzt, es wurde bereits versteckt:

<!-- 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> 

Sie können see a working example of this here und unter Verwendung einer Verzögerung von 5 Sekunden demonstriert:

Pure CSS Ansatz

können Sie in der Lage sein, dies zu erreichen, indem ein CSS animation zusammen mit der entsprechenden Verzögerung ähnlich das Konzept zu schaffen, in Ihrem ersten Beitrag demonstriert:

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

Dies verwendet die opacity Eigenschaft zu Ihrem Elemente aus verborgenen 0 zu gezeigt verstecken und über 1 nach einer Verzögerung von 10 Minuten (600 Sekunden). Darüber hinaus stellt die forwards-Eigenschaft sicher, dass der Endwert Ihres Übergangs nach Abschluss der Animation erhalten bleibt.

Sie können see an example of this in action here und unten als auch demonstriert:

Worth

sowohl in Anbetracht Da dieser Ansätze sind rein clientseitigen Code, sie verlangen, dass die Seite nicht aktualisiert werden, oder während dieser Zeit zurückgeschickt, da dadurch der Timer zurückgesetzt wird. Wenn dies für Ihre Anforderungen nicht funktioniert, müssen Sie wahrscheinlich eine serverseitige Methode verwenden, um zu bestimmen, wann der "Timer" ausgeführt wurde, und dann Ihren Button auf diese Weise anzeigen.

Answer 2

Haben Sie versucht, eine Verzögerungszeit hinzuzufügen?

animation-delay: 10s;