当我使用放大动画时，元素正在消失

Question

css zoomIn 动画完成后元素消失。 当我删除 opacity：0 时，它将停止消失，而是在动画(放大(发生之前出现元素。为什么会这样？

请参阅此处的行为：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

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

Answer 2

你应该使用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>