Element is disappearing when i use zoomIn animation

Question

The element is disappearing after css zoomIn animation is finished. When i remove opacity:0 it will stop vanishing but instead the element appears before the animation (zoomIn) taking place. Why is this happening?

See the behaviour here: https://jsfiddle.net/dhnvwmrs/

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}


#box {
   height:400px;
   width:400px;
   background: red;
   -webkit-animation: zoomIn 2s ease .5s forwards;
   opacity:0;
}

<div id="box"></div>

Answer 1

Describe properties for 100%, just copy properties from 50% and it will probably work.

    @-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }

100% {
        opacity: 1;
      }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }

100% {
        opacity: 1;
      }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}


#box {
   height:400px;
   width:400px;
   background: red;
   -webkit-animation: zoomIn 2s ease .5s forwards;
   opacity:0;
}