<h3 class="item-title">
	<span>M</span>
	<span>I</span>
	<span>S</span>
	<span>S</span>
	<span>I</span>
	<span>O</span>
	<span>N</span>
</h3>
<div>
	<button onclick="execute()">execute</button>
	<button onclick="reset()">reset</button>

</div>

:root {
	--customOpacity: 1;
	--customTransition: all 0.2s;
	--customvisibility: visible;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: #000;
}
.item-title {
	color: #fff;
	font-size: 28px;
	width: 100%;
	text-align: center;
}
.item-title span {
	position: relative;
	width: 5rem;
	opacity: 0;
}

.item-title span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: var(--customOpacity, 1);
	transition: var(--customTransition, all 0.2s);
}

button {
	border: none;
	width: 200px;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	background: lightgreen;
}
button:last-child {
	background: lightcoral;
}

let [...letters] = document.querySelectorAll("span");
let randomLetters = [];
let delay = 0;
function execute() {
	randomLetters = letters.sort(() => Math.random() - 0.5);
	randomLetters.forEach((letter) => {
		setTimeout(() => {
			letter.style.setProperty("--customTransition", "all 0.4s");
			letter.style.opacity = 1;
			letter.style.setProperty("--customOpacity", "0");
		}, (delay += 100));
	});
}
function reset() {
	randomLetters.forEach((letter) => {
		letter.style.opacity = 0;
		letter.style.setProperty("--customOpacity", "1");
	});
	delay = 0;
}