For my game project, I needed a way to make a div fade out after an onclick event. However, the issue I encountered was that after fading out, the div would reappear. Ideally, I wanted it to simply disappear without any sort of fade effect. Below is the code snippet I used:
function fade() {
document.getElementById('circle').style.animation="fadeout 1s"
}@keyframes fadeout {
1% {
opacity: 100;
}
99% {
opacity: 0;
}
100% {
visibility: none;
}
}
.fadeout {
animation: fadeout 1s
}
.circle {
height: 25px;
width: 25px;
background-color: black;
border-radius: 50%;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Aim</title>
<div onclick="fade()" id="circle" class="circle"></div>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<script src="script.js"></script>
</body>
</html>Thank you for your help!