Simple Text animation using HTML and CSS ( source code )

Simple Text animation using HTML and CSS ( source code )

HTML

<div class="wrapper"> <span>d</span> <span>i</span> <span>v</span> <span>i</span> <span>n</span> <span>e</span> <span>c</span> <span>t</span> <span>o</span> <span>r</span> </div>


CSS


body{ background: deeppink; } .wrapper { font-size: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .wrapper span { display: inline-block; font-family: Poppins; font-size: 80px; text-transform: uppercase; font-weight: bold; } .wrapper span:nth-of-type(2) { animation-delay: .05s; } .wrapper span:nth-of-type(3) { animation-delay: .1s; } .wrapper span:nth-of-type(4) { animation-delay: .15s; } .wrapper span:nth-of-type(5) { animation-delay: .2s; } .wrapper span:nth-of-type(6) { animation-delay: .25s; } .wrapper span:nth-of-type(7) { animation-delay: .3s; } .wrapper span:nth-of-type(8) { animation-delay: .35s; } .wrapper span:nth-of-type(9) { animation-delay: .4s; } .wrapper span:nth-of-type(10) { animation-delay: .45s; } .wrapper span { color: #fff; opacity: 0; transform: translate(-155px, 0) scale(.4); animation: animate .5s forwards; } @keyframes animate { 40% { transform: translate(50px, 0) scale(.7); opacity: 1; color: #fff; } 60% { color: wheat; } 80% { transform: translate(0) scale(2); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; } }