Simple CSS text Animation - Get HTML and CSS

Design by : http://codepen.io/bennettfeely
HTML code :

<div class="cssload-preloader">
            <span>L</span>
        <span>o</span>
        <span>a</span>
        <span>d</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>

</div>

CSS code :

.cssload-preloader {
    font-family: Arial, Tahoma;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    display: box;
        display: -o-box;
        display: -ms-box;
        display: -webkit-box;
        display: -moz-box;
    display: flex;
        display: -o-flex;
        display: -ms-flex;
        display: -webkit-flex;
        display: -moz-flex;
    box-pack: center;
        -o-box-pack: center;
        -ms-box-pack: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
    justify-content: center;
        -o-justify-content: center;
        -ms-justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
    box-align: center;
        -o-box-align: center;
        -ms-box-align: center;
        -webkit-box-align: center;
        -moz-box-align: center;
    align-items: center;
        -o-align-items: center;
        -ms-align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
    transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
    perspective: 487px;
        -o-perspective: 487px;
        -ms-perspective: 487px;
        -webkit-perspective: 487px;
        -moz-perspective: 487px;
    overflow: hidden;
    animation: wobble 5.75s ease-in-out infinite;
        -o-animation: wobble 5.75s ease-in-out infinite;
        -ms-animation: wobble 5.75s ease-in-out infinite;
        -webkit-animation: wobble 5.75s ease-in-out infinite;
        -moz-animation: wobble 5.75s ease-in-out infinite;
    padding-bottom: 2em;
}


.cssload-preloader > span {
    font-size: 49px;
    animation: 5.75s ease-in-out infinite;
        -o-animation: 5.75s ease-in-out infinite;
        -ms-animation: 5.75s ease-in-out infinite;
        -webkit-animation: 5.75s ease-in-out infinite;
        -moz-animation: 5.75s ease-in-out infinite;
    color: transparent;
    text-shadow: 0 0 0px rgb(0,0,0);
}
span:nth-child(-n+3) {
    animation-delay: -2.88s;
        -o-animation-delay: -2.88s;
        -ms-animation-delay: -2.88s;
        -webkit-animation-delay: -2.88s;
        -moz-animation-delay: -2.88s;
}

span:nth-child(1),
span:nth-last-child(1) {
    animation-name: blur-1;
        -o-animation-name: blur-1;
        -ms-animation-name: blur-1;
        -webkit-animation-name: blur-1;
        -moz-animation-name: blur-1;
}



span:nth-child(2),
span:nth-last-child(2) {
    animation-name: blur-2;
        -o-animation-name: blur-2;
        -ms-animation-name: blur-2;
        -webkit-animation-name: blur-2;
        -moz-animation-name: blur-2;
}



span:nth-child(3),
span:nth-last-child(3) {
    animation-name: blur-3;
        -o-animation-name: blur-3;
        -ms-animation-name: blur-3;
        -webkit-animation-name: blur-3;
        -moz-animation-name: blur-3;
}






@keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@-o-keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@-ms-keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@-webkit-keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@-moz-keyframes blur-1 {
    50% {
        text-shadow: 0 0 0.15em rgb(0,0,0);
    }
}

@keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@-o-keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@-ms-keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@-webkit-keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@-moz-keyframes blur-2 {
    50% {
        text-shadow: 0 0 0.075em rgb(0,0,0);
    }
}

@keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@-o-keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@-ms-keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@-webkit-keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@-moz-keyframes blur-3 {
    50% {
        text-shadow: 0 0 0.05em rgb(0,0,0);
    }
}

@keyframes wobble {
    from, to {
        transform: rotateY(-45deg);
    }
    50% {
        transform: rotateY(45deg);
    }
}

@-o-keyframes wobble {
    from, to {
        -o-transform: rotateY(-45deg);
    }
    50% {
        -o-transform: rotateY(45deg);
    }
}

@-ms-keyframes wobble {
    from, to {
        -ms-transform: rotateY(-45deg);
    }
    50% {
        -ms-transform: rotateY(45deg);
    }
}

@-webkit-keyframes wobble {
    from, to {
        -webkit-transform: rotateY(-45deg);
    }
    50% {
        -webkit-transform: rotateY(45deg);
    }
}

@-moz-keyframes wobble {
    from, to {
        -moz-transform: rotateY(-45deg);
    }
    50% {
        -moz-transform: rotateY(45deg);
    }
}