[英]Element is disappearing when i use zoomIn animation
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>
您应该使用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>
描述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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.