åå Smoky Text Animation





  1. Tutorials
  2. CSS
  3. Smoky Text Animation

Smoky Text Animation

In this tutorial, you will learn how to create a smoky text animation using pure CSS. Watch the video below for a detailed tutorial.

HTML

<div class="container">
    <span>W</span>
    <span>I</span>
    <span>N</span>
    <span>T</span>
    <span>E</span>
    <span>R</span>
    <span>W</span>
    <span>I</span>
    <span>N</span>
    <span>D</span>
  </div>

CSS

@import  url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

body {
	background-color: #2e3537;
	font-family: 'Lilita One', cursive;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	backface-visibility: hidden;
}

span {
	color: transparent;
	font-size: 5.3em;
	display: inline-block;
	text-shadow: 0 0 0 white;
	animation-duration: 4s;
	animation-fill-mode: both;
}

span:nth-child(odd) {
	animation-name: smoke;
}

span:nth-child(even) {
	animation-name: smoke2;
}

@keyframes  smoke {
	60% {
		text-shadow: 0 0 40px white;
	}
	100% {
		transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		text-shadow: 0 0 20px white;
		opacity: 0;
	}
}

@keyframes  smoke2 {
	60% {
		text-shadow: 0 0 40px white;
	}
	100% {
		transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		text-shadow: 0 0 20px white;
		opacity: 0;
	}
}

span:nth-of-type(1) {
	animation-delay: 1.1s;
}
span:nth-of-type(2) {
	animation-delay: 1.2s;
}
span:nth-of-type(3) {
	animation-delay: 1.3s;
}
span:nth-of-type(4) {
	animation-delay: 1.4s;
}
span:nth-of-type(5) {
	animation-delay: 1.5s;
}
span:nth-of-type(6) {
	animation-delay: 1.6s;
}
span:nth-of-type(7) {
	animation-delay: 1.7s;
}
span:nth-of-type(8) {
	animation-delay: 1.8s;
}
span:nth-of-type(9) {
	animation-delay: 1.9s;
}
span:nth-of-type(10) {
	animation-delay: 2s;
}