0
我有一个带有两个div的HTML页面。 div代表向导中的步骤。在用户完成第一步之后,我希望第二步从屏幕上放大。看起来,它自然推动了第一步。用户在第一步中输入的信息将显示在第二步下方。CSS动画 - 动画缩放
我创建了一个JSFiddle here。我的CSS动画的定义如下所示:
.first-initial {
transition: all 1.0s ease;
}
.first-animation {
padding-left:3rem;
padding-right:3rem;
}
.second-initial {
transform: scaleY(0);
opacity: 0;
display: none;
}
.second-animation {
-webkit-animation-name: zoomIn;
-webkit-animation-delay: 1.0s;
animation-name: zoomIn;
animation-delay: 1.0s;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
我的问题是与display
财产。我无法动画display
属性。但是,如果我没有将display
财产设置为none
,则第一步的定位不正确。随着第二步的增长,我如何自然推动第一步?