[CSS] Animation

Hey,

<div id="element"></div>


#element{
  position: absolute;
  width: 100px;
  height: 100px;
  animation-name: test;
  animation-duration: 4s;
  animation-delay: 1s;
  opacity: 1;
  background-color: red;
}

@keyframes test{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
   }
}

Mein Problem dabei ist, dass die Box schon von anfang an da ist und nicht erst, wenn die Animation beginnt. Nartürlich kann ich die Opacity auf 0 setzen, dann ist die Box aber nicht mehr sichtbar, wenn die Animation beendet wurde. Ist es irgendwie möglich die Opacity nach Ende der Animation zu ändern?

Gruss

Zipity

Danke