當我使用zoomIn動畫時元素消失了

Question

CSS zoomIn動畫完成后，該元素消失。 當我刪除opacity：0時，它將停止消失，但元素會在動畫（zoomIn）發生之前出現。 為什么會這樣呢？

在此處查看行為： 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

您應該使用to代替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

描述100％的屬性，只需復制50％的屬性，它可能會起作用。

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