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

You should use to instead of 50% :

 @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { 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 2

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;
}