#toranimation {
  opacity:1;	
  font-family: sans-serif;
  font-weight: bold; 
  display: block;
  animation: myfirst 4s linear 0.1s;
  color: rgb(255, 0, 0);      
}

@keyframes myfirst {
  0% {
    display: block;
    opacity: 1;	
    z-index: +1;   
      height: 100px;
      width: 222px;
      font-family: sans-serif;
      height: 100px;
      width: 222px;
      top: 30px;
      left: 0px;
      font-size: 80px;
      position: absolute;
      text-align: center;
      background-color: rgb(255, 255, 255);
  color: rgb(30, 57, 209);
  }

  25% {
    z-index: +1;   
      height: 100px;
      width: 222px;
      font-family: sans-serif;
      height: 100px;
      width: 222px;
      top: 30px;
      left: 0px;
      font-size: 80px;
      position: absolute;
      text-align: center;
      background-color: hsl(51, 88%, 51%);
  color: rgb(30, 57, 209);
  }

  50% {
    z-index: +1;   
      height: 100px;
      width: 222px;
      font-family: sans-serif;
      height: 100px;
      width: 222px;
      top: 30px;
      left: 0px;
      font-size: 80px;
      position: absolute;
      text-align: center;
      background-color: rgb(255, 255, 255);
  color: rgb(30, 57, 209);
  }

  75% {
    z-index: +1;   
      height: 100px;
      width: 222px;
      font-family: sans-serif;
      height: 100px;
      width: 222px;
      top: 30px;
      left: 0px;
      font-size: 80px;
      position: absolute;
      text-align: center;
      background-color: hsl(51, 88%, 51%);
  color: rgb(30, 57, 209);
  }

  100% {
    z-index: +2;   
      height: 100px;
      width: 222px;
      font-family: sans-serif;
      height: 100px;
      width: 222px;
      top: 30px;
      left: 0px;
      font-size: 80px;
      position: absolute;
      text-align: center;
      background-color: rgb(255, 255, 255);
  color: rgb(30, 57, 209);
 

  }
}