Ausblendeffekt, wenn mein Text erscheint css

Question

Ich möchte einen Text aus meiner Klasse "fadeOut" verschwinden lassen, nachdem er für 2 Sekunden angezeigt wurde.

Gibt es eine einfache Möglichkeit, dies mit einem CSS-Übergang zu tun?

  $('#errMsg').append('<div class="fadeOut">Beware</div>') 

Answer 1

Sieht aus wie Sie jQuery verwenden

versuchen, diese

$('#errMsg').append('<div class="fadeOut">Beware</div>').delay(2000).fadeOut(); 

Wenn Sie eine reine CSS-Lösung dieses

#errMsg { 
 
    -moz-animation: cssAnimation 0s ease-in 5s forwards; 
 
    /* Firefox */ 
 
    -webkit-animation: cssAnimation 0s ease-in 5s forwards; 
 
    /* Safari and Chrome */ 
 
    -o-animation: cssAnimation 0s ease-in 5s forwards; 
 
    /* Opera */ 
 
    animation: cssAnimation 0s ease-in 5s forwards; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes cssAnimation { 
 
    to { 
 
     opacity:0 
 
    } 
 
}

<div id='errMsg'>This is will hide after 5 seconds</div>

Answer 2

können Sie die CSS Übergang Eigenschaft transition-delay:

.element { 
    transition-delay: 3s; 
} 

Hier ist eine Liste der anwendbaren transition Eigenschaften:

/* property name | duration | timing function | delay */ 
transition: all 4s ease-in-out 1s; 

Sie können hier mehr über Übergangsverzögerungen lesen: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay