igorvolnyi/css-text-smoke-effect.css

## css-text-smoke-effect.css
html,
body,
#page-container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    font-family: sans-serif;
}

#page-container {
    background-color: rgb(37, 53, 53);
}

.center {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.smoke-fadeout {
    /* width: 100%; */
    height: 200px;
    color: #fff;
    font-weight: bold;
    font-size: 150px;
    position: absolute;
    top: calc(50% - 100px);
    bottom: 50%;
    /* transform: translate(-50%, -50%); */
    text-shadow: 2px 2px 8px #bbb;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}

.smoke-fadeout:hover span {
    animation: smoke 2s linear forwards;
}

@keyframes smoke {
    100% {
        opacity: 0;
        filter: blur(40px);
        transform: translate(60px, -200px) rotate(25deg);
    }
}

.smoke-fadeout span:nth-child(1) {
    animation-delay: 0.8s;
}
.smoke-fadeout span:nth-child(2) {
    animation-delay: 0.6s;
}
.smoke-fadeout span:nth-child(3) {
    animation-delay: 0.4s;
}
.smoke-fadeout span:nth-child(4) {
    animation-delay: 0.2s;
}
.smoke-fadeout span:nth-child(5) {
    animation-delay: 0s;
}

## css-text-smoke-effect.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css-text-smoke-effect.css" />
        <title>CSS Text Fade-out Smoke Effect</title>
    </head>
    <body>
        <div id="page-container">
            <div class="center">
                <div class="smoke-fadeout">
                    <span>H</span>
                    <span>E</span>
                    <span>L</span>
                    <span>L</span>
                    <span>O</span>
                </div>
            </div>
        </div>
    </body>
</html>
	html,
	body,
	#page-container {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	}

	body {
	overflow: hidden;
	font-family: sans-serif;
	}

	#page-container {
	background-color: rgb(37, 53, 53);
	}

	.center {
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.smoke-fadeout {
	/* width: 100%; */
	height: 200px;
	color: #fff;
	font-weight: bold;
	font-size: 150px;
	position: absolute;
	top: calc(50% - 100px);
	bottom: 50%;
	/* transform: translate(-50%, -50%); */
	text-shadow: 2px 2px 8px #bbb;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	/* border: 1px solid red; */
	}

	.smoke-fadeout:hover span {
	animation: smoke 2s linear forwards;
	}

	@keyframes smoke {
	100% {
	opacity: 0;
	filter: blur(40px);
	transform: translate(60px, -200px) rotate(25deg);
	}
	}

	.smoke-fadeout span:nth-child(1) {
	animation-delay: 0.8s;
	}
	.smoke-fadeout span:nth-child(2) {
	animation-delay: 0.6s;
	}
	.smoke-fadeout span:nth-child(3) {
	animation-delay: 0.4s;
	}
	.smoke-fadeout span:nth-child(4) {
	animation-delay: 0.2s;
	}
	.smoke-fadeout span:nth-child(5) {
	animation-delay: 0s;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css-text-smoke-effect.css" />
	<title>CSS Text Fade-out Smoke Effect</title>
	</head>
	<body>
	<div id="page-container">
	<div class="center">
	<div class="smoke-fadeout">
	<span>H</span>
	<span>E</span>
	<span>L</span>
	<span>L</span>
	<span>O</span>
	</div>
	</div>
	</div>
	</body>
	</html>