CSS动画 - 动画缩放

Question

我有一个带有两个div的HTML页面。 div代表向导中的步骤。在用户完成第一步之后，我希望第二步从屏幕上放大。看起来，它自然推动了第一步。用户在第一步中输入的信息将显示在第二步下方。

我创建了一个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，则第一步的定位不正确。随着第二步的增长，我如何自然推动第一步？

Answer 1

我不太明白......你需要在点击“下一个按钮”之后显示下一个输入吗？看看是否是你想要什么：

$('.next').click(function() { 
 
    var box = $(this).parents('.box').attr('data-box'); 
 
    $('[data-box="' + (Number(box) + 1) + '"]').slideDown(400); 
 
}); 
 

 
$('.send').click(function() { 
 
    $('.message').slideDown(400) 
 
});

.box { 
 
    display: none; 
 
} 
 
.active { 
 
    display: block; 
 
} 
 
label { 
 
    display: block; 
 
} 
 
.message { 
 
    display: none; 
 
    padding: 10px; 
 
    border: 1px solid green; 
 
    background: #EFE; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="container-toggle"> 
 
    <div class="message">Thanks!</div> 
 

 
    <div class="box" data-box="4"> 
 
    <label>Address</label> 
 
    <input type="text" /> 
 
    <button class="send">Next</button> 
 
    </div> 
 

 
    <div class="box" data-box="3"> 
 
    <label>Phone</label> 
 
    <input type="text" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 

 
    <div class="box" data-box="2"> 
 
    <label>Name</label> 
 
    <input type="text" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 

 
    <div class="box active" data-box="1"> 
 
    <label>Email</label> 
 
    <input type="email" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 
</div>