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;
            }
        }