body {
  background-color: rgb(48, 66, 148);
}
#box {
  width:300px;
  height:300px;
  border:1px solid yellow;
}
#boll {
  width:50px;
  height:50px;
  background-color:chartreuse;
  animation-name:move,chColor;
  animation-duration:2s,2s;
  animation-direction:alternate-reverse;
  animation-iteration-count:4,1; /*infinite*/
}

@keyframes toGroat {
  from {
      width:50px;
      height: 50px;
  }
  to {
      width:200px;
      height:200px;
  }
}
@keyframes chColor {
  from,to {
      background-color:green;
  }
  25% {
      background-color:yellow;
  }
  50% {
      background-color: red;
  }
  75% {
      background-color:blueviolet;
  }
}
@keyframes move {
  25% {
      transform: translateX(250px);
  }
  50% {
      transform: translate(250px,250px);
  }
  75% {
      transform: translateY(250px);
  }
}