Infinity animation

by anup1986

HTML

<div id="infinity">
    <div class="element-animation"></div>
</div>

CSS

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
#infinity:before, #infinity:after {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 20px solid rgba(0, 0, 0, 0.5);
    -moz-border-radius: 50px 50px 0 50px;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.element-animation {
    -webkit-animation: animationFrames ease-in 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    background: #86BC26;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 65px;
}
@-webkit-keyframes animationFrames {
    0% {
        -webkit-transform: translate(0, 0);
    }
    15% {
        -webkit-transform: translate(-65px, 65px);
    }
    17% {
        -webkit-transform: translate(-85px, 70px);
    }
    20% {
        -webkit-transform: translate(-100px, 70px);
    }
    23% {
        -webkit-transform: translate(-115px, 60px);
    }
    25% {
        -webkit-transform: translate(-122px, 50px);
    }
    28% {
        -webkit-transform: translate(-127px, 40px);
    }
    30% {
        -webkit-transform: translate(-127px, 30px);
    }
    32% {
        -webkit-transform: translate(-127px, 20px);
    }
    34% {
        -webkit-transform: translate(-122px, 10px);
    }
    37% {
        -webkit-transform: translate(-115px, 0);
    }
    39% {
        -webkit-transform: translate(-100px, -7px);
    }
    42% {
        -webkit-transform:...