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>