In this tutorial, you will learn how to create a smoky text animation using pure CSS. Watch the video below for a detailed tutorial.
<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>@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;
}