body {
  margin: 0;
}

#box1 {
  width: 250px;
  height: 250px;
  background-color: red;
  font-size: 225px;
  text-align: center;

  /* animation: mySlide;
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-duration: 5s; */
  animation: 5s ease-out 1s infinite running allInOne;
  /* animation: 5s ease-out 1s infinite running changeColor; */
}

/* #box1:hover {
  animation: 5s ease-out 1s infinite running myRotate;
}

#box1:active {
  animation: 5s ease-out 1s infinite running mySlide;
} */

@keyframes allInOne {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
  20% {
    background-color: orange;
  }
  40% {
    background-color: yellow;
  }
  60% {
    background-color: green;
  }
  80% {
    background-color: blue;
  }
  100% {
    background-color: purple;
  }
  100% {
    transform: rotateZ(360deg);
  }
  50% {
    opacity: 0;
  }
  /* 50% {
    transform: scale(0.5, 0.5);
  } */
}

@keyframes mySlide {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@keyframes myRotate {
  /* 100% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotateY(360deg);
  } */
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes myOpacity {
  50% {
    opacity: 0;
  }
}

@keyframes myScale {
  50% {
    transform: scale(0.5, 0.5);
  }
}

@keyframes changeColor {
  20% {
    background-color: orange;
  }
  40% {
    background-color: yellow;
  }
  60% {
    background-color: green;
  }
  80% {
    background-color: blue;
  }
  100% {
    background-color: purple;
  }
}