<div class="ball"></div>
.ball{
  margin:50px 0 0 50px;
  width:100px;
  height:100px;
  border-radius:50%;
  background-color:#097054;
  animation:change 3s cubic-bezier(.9,-0.53,0,1.58) alternate infinite; 
}
@keyframes change{
  0%{
    transform:scale(1) translateX(0);
  }
  100%{
    transform:scale(1.5) translateX(300px)  ;
    background-color:#FF9900;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.