My Load Animation

by Mark

HTML

<div class="test"></div>
<div class="test1"></div>
<div class="test2"></div>
<!-- Code by Mark Cupito-->

CSS

.test, .test1, .test2 {
    vertical-align: middle;
    float: left;
    border-radius: 50%;
    background: #528AE8;
    margin-left: auto;
    margin-right: auto;
    width: 15px;
    height: 15px;
    -webkit-animation: tester 0.8s infinite alternate;
}

.test1 {
    -webkit-animation-delay: .2s; /* Safari and Chrome */
}

.test2 {
    -webkit-animation-delay: .3s; /* Safari and Chrome */
}

@-webkit-keyframes tester {
    0%   {
        height: 15px;
        width: 15px;
        opacity: 1;
        -webkit-transform: translateX(0px);
    
    }
     
    100% {
        height: 42px;
        width: 42px;
        opacity: .1;
        -webkit-transform: translateX(25px);
    
    }
}