h1 {color:blue;}

.box {
  height: 100px;
  width: 100px;
 	position: relative;
}
#box1 {
	animation: example 5s infinite;
}
#box2 {
	animation: example2 10s infinite;
}

@-webkit-keyframes example {
  0% {
  	left: 0;
    top: 0;
    background-color: purple;
    transform: scale(1);
  }
  25% {
  	left: 30em;
    top: 0;
    background-color: green;
    transform: scale(1.5);
  }
  50% {
  	left: 30em;
    top: 30em;
    background-color: brown;
    transform: scale(1, 2);
  }
  75% {
  	left: 0;
    top: 30em;
    background-color: yellow;
    transform: scale(2, 1);
  }
  100% {
  	left: 0;
    top: 0;
    background-color: purple;
    transform: scale(1);
  }
}
@-webkit-keyframes example2 {
  0% {
  	left: 5em;
    top: 5em;
    background-color: teal;
    transform: scale(1);
  }
  25% {
  	left: 35em;
    top: 35em;
    background-color: rebeccapurple;
    transform: scale(1.5);
  }
  50% {
  	left: 35em;
    top: 35em;
    background-color: lime;
    transform: scale(1, 2);
  }
  75% {
  	left: 35em;
    top: 40em;
    background-color: cyan;
    transform: scale(2, 1);
  }
  100% {
  	left: 5em;
    top: 5em;
    background-color: teal;
    transform: scale(1);
  }
}