Mir fehlte der Ansatz wie ich das mit dem Button mache.
Habe es nun so gelöst:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fade{
background: red;
opacity:0;
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
margin: 8px 0px;
padding:8px;
position: absolute;
left: 50%;
top: 20%;
}
.elementToFadeInAndOut {
animation: fadeInOut 3s linear forwards;
}
@keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
</style>
</head>
<body onload="javascript:start();">
<body>
<script type="text/javascript">
function start() {
var div = document.querySelector(".fade");
var btn = document.querySelector(".fadeButton");
btn.addEventListener("click", function(){
div.classList.add("elementToFadeInAndOut");
setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 3000);
});
}
</script>
<button class="fadeButton">Button</button>
<div class="fade">This is a message!</div>
</body>
</html>