CSS for gradient text font and rotating list animation

p {
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 30%);
  background-clip: text;
  color: transparent;
}

.rotate-list span {
  animation: rotateList 4s linear infinite;
  color: #3f91ef;
  opacity: 0;
  position: absolute;
}
.rotate-list span:nth-child(2) {
  animation-delay: 2s;
}
@keyframes rotateList {
  0% { opacity: 0; }
  20% { opacity: 0; transform: translateY(50px); }
  30% { opacity: 1; transform: translateY(0px); }
  70% { opacity: 1; transform: translateY(0px); }
  80% { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 0; }
}

.box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  animation: boxMove 15s infinite;
}
@keyframes boxMove {
  0%   {top: 0px; left: 0px; background: red; width: 50px;}
  25% {top: 100px; background: yellow; width: 75px;}
  50% {top: 200px; left: 100px; background: yellow; width: 75px;}
  75% {left: 0px; background: yellow; width: 75px;}
  100%   {top: 0px; background: red; width: 50px;}
}