CSS - Statusmeldung nach 5 Sekunden ausblenden

Eine Statusmeldung

<style>

/* Statusmeldung nach 5 Sekunden ausblenden */

.success {
 
background-color#e3ffe3;
 
bordersolid 2px #00b700;
 
text-aligncenter;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 5s ease forwards;
}

.
error {
 
background-color#ffd5d5;
 
bordersolid 2px #ff4d4d;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 10s ease forwards;
}

@
keyframes status {
 
0% {
  
opacity1;
  
pointer-eventsall;
 }
 
90% {
  
opacity1;
  
pointer-eventsall;
 }
 
100% {
  
opacity0;
  
pointer-eventsnone;
 }
}
</
style>

<
div class="success">Eine Statusmeldung</div>

Statusmeldung je nach Nachricht ausblenden (mit JavaScript)


<style>

/* Statusmeldung je nach Nachricht ausblenden */

.success {
 
background-color#e3ffe3;
 
bordersolid 2px #00b700;
 
text-aligncenter;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 5s ease forwards;
}

.
error {
 
background-color#ffd5d5;
 
bordersolid 2px #ff4d4d;
 
text-aligncenter;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 10s ease forwards;
}

@
keyframes status {
 
0% {
  
opacity1;
  
pointer-eventsall;
 }
 
90% {
  
opacity1;
  
pointer-eventsall;
 }
 
100% {
  
opacity0;
  
pointer-eventsnone;
 }
}
</
style>

<
div id="message"></div>

<
script>
let message document.querySelector('#message');

if (
"Inhalt" == "Inhalt") {
 
message.textContent = `Die Inhalte sind gleich.`;
 
message.classList.add("success");
}
else {
 
message.textContent = `Die Inhalte sind ungleich!`;
 
message.classList.add("error");
}
</
script>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<script> JavaScript

CSS - Text mit gestreiftem Hintergrund

PHP - Gerade Zahlen ausgeben

JavaScript - Formularinhalt herunterladen

MySQL - Daten aus zwei DB-Tabellen auslesen