当我使用 zoomIn 动画时元素消失

Question

元素在 css 放大动画结束后消失。当我删除 opacity:0 时，它将停止消失，而是元素出现在动画（放大）发生之前。为什么会这样？

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

当我使用 zoomIn 动画时元素消失

Element is disappearing when i use zoomIn animation

css

animation

zooming