Cool CSS Text Animation - Get HTML and CSS

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

<div class="cssload-preloader">
    <div class="cssload-preloader-box">        <div>H</div>        <div>A</div>        <div>D</div>        <div>E</div>        <div>S</div>        <div>D</div>        <div>Z</div>        <div>G</div>        <div>N</div></div>
</div>

CSS code :

.cssload-preloader {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
}

.cssload-preloader > .cssload-preloader-box {
    position: absolute;
    height: 29px;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -146px;
    perspective: 195px;
        -o-perspective: 195px;
        -ms-perspective: 195px;
        -webkit-perspective: 195px;
        -moz-perspective: 195px;
}

.cssload-preloader .cssload-preloader-box > div {
    position: relative;
    width: 29px;
    height: 29px;
    background: rgb(204,204,204);
    float: left;
    text-align: center;
    line-height: 29px;
    font-family: Verdana;
    font-size: 19px;
    color: rgb(255,255,255);
}.cssload-preloader .cssload-preloader-box > div:nth-child(1) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 0ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 0ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 0ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 0ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 0ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(2) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 86.25ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(3) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 172.5ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(4) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 258.75ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(5) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 345ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 345ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 345ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 345ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 345ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(6) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 431.25ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(7) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 517.5ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(8) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 603.75ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 603.75ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 603.75ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 603.75ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 603.75ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(9) {
    background: rgb(51,102,255);
    margin-right: 15px;
    animation: cssload-movement 690ms ease 690ms infinite alternate;
        -o-animation: cssload-movement 690ms ease 690ms infinite alternate;
        -ms-animation: cssload-movement 690ms ease 690ms infinite alternate;
        -webkit-animation: cssload-movement 690ms ease 690ms infinite alternate;
        -moz-animation: cssload-movement 690ms ease 690ms infinite alternate;
}


@keyframes cssload-movement {
    from {
        transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

@-o-keyframes cssload-movement {
    from {
        -o-transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        -o-transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

@-ms-keyframes cssload-movement {
    from {
        -ms-transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        -ms-transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

@-webkit-keyframes cssload-movement {
    from {
        -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        -webkit-transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

@-moz-keyframes cssload-movement {
    from {
        -moz-transform: scale(1.0) translateY(0px) rotateX(0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    to {
        -moz-transform: scale(1.5) translateY(-24px) rotateX(45deg);
        box-shadow: 0 24px 39px rgba(0,0,0,0.4);
        background: #3399FF;
    }
}

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