css3AnimatingBall

.circle {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.red {
    background-color: red;
}



.blue {
    background-color: blue;
}

.animate-red {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: jobrunnig-red;
    animation-direction:alternate;
    -webkit-animation-direction:alternate;
  -webkit-animation-play-state: running;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: jobrunnig-red;
}

.animate-blue {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: jobrunnig-blue;
    animation-direction:alternate;
    -webkit-animation-direction:alternate;
  -webkit-animation-play-state: running;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: jobrunnig-blue;
}

@keyframes jobrunnig-blue {
    from {
        background-color: blue;
    }

    to {
       background-color: #ffffff;
    }
}

@-webkit-keyframes jobrunnig-blue {
    from {
        background-color: blue;
    }

    to {
        background-color: #ffffff;
    }
}

@keyframes jobrunnig-red {
    from {
        background-color: red;
    }

    to {
        background-color: #ffffff;
    }
}

@-webkit-keyframes jobrunnig-red {
    from {
        background-color: red;
    }

    to {
        background-color: #ffffff;
    }
}