Bouncy Animated Loading Animation

This CSS trick is amzanig and i am sure you will like it. Just another coolest thing with CSS3 animations. If you are worried about super deep browser support, use a GIF file.
Well, I guess you are using a good browser. If i am wrong then please uninstall it and install and use a good/better one. Thank You!

***---HTML---***

<div class="loader">

    <span></span>

    <span></span>

    <span></span>

</div>

***---CSS---***

.loader {

    text-align: center;    

}

.loader span {

    display: inline-block;

    vertical-align: middle;

    width: 10px;

    height: 10px;

    margin: 50px auto;

    background: black;

    border-radius: 50px;

    -webkit-animation: loader 0.9s infinite alternate;

    -moz-animation: loader 0.9s infinite alternate;

}

.loader span:nth-of-type(2) {

    -webkit-animation-delay: 0.3s;

    -moz-animation-delay: 0.3s;

}

.loader span:nth-of-type(3) {

    -webkit-animation-delay: 0.6s;

    -moz-animation-delay: 0.6s;

}

@-webkit-keyframes loader {

  0% {

    width: 10px;

    height: 10px;

    opacity: 0.9;

    -webkit-transform: translateY(0);

  }

  100% {

    width: 24px;

    height: 24px;

    opacity: 0.1;

    -webkit-transform: translateY(-21px);

  }

}

@-moz-keyframes loader {

  0% {

    width: 10px;

    height: 10px;

    opacity: 0.9;

    -moz-transform: translateY(0);

  }

  100% {

    width: 24px;

    height: 24px;

    opacity: 0.1;

    -moz-transform: translateY(-21px);

  }

}

 Reference URL