Так что у меня есть что-то вроде формы. Когда страница загружена, она увеличивается с Animate. css. Я хочу получить этот эффект, где: когда форма заполнена и нажата кнопка, форма перемещается куда-то еще, и в этом месте появится другое поле. Я начинаю изучать программирование, и я не могу понять это. Буду очень признателен за любую помощь в решении моей проблемы!
<html>
<head>
<link rel="stylesheet" href="pracadomowa.css">
<link rel="stylesheet" href="animate.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body >
<div id="wrap" class="wrap">
<div id="box0" class="animated zoomInUp">
<h1 >Check
pension</h1>
</div>
<div id="box1" class=" animated zoomInUp">
<h1 style=" background-color:#4b4a55; border-radius: 8px; padding:5px; color:#ebeaed;">Fill Data</h1>
<div class="container">
<label class="container">Woman
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Man
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div style="clear:both;">
</div>
<center><h6 style="color:#4b4a55;">Age:</h6><center>
<input type="number" size="6" name="age" min="10" max="99" ><br>
<button id="button" ><span>
Submit</span></button>
</div>
</div>
<script type="text/javascript" src="scripts/scripts.js">
$('#button').on('click', function(){
$('#box0').removeClass('animated zoomInUp');
$('#box0').addClass('animated zoomOutUp');
});
</script>
</body>
</html>
margin:0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
body{
text-align: center;
}
#box0{
background-color:#ebeaed;
border-radius: 8px;
width: 400px;
margin-top: 150px;
margin-left: -250px;
left: 50%;
padding: 10px;
text-align: center;
position: absolute;
}
#box1{
background-color:#ebeaed;
border-radius: 8px;
width: 400px;
height: auto;
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -250px;
font-size: 40px;
padding:20px;
}
#box2{
background-color:#ebeaed;
border-radius: 8px;
width: 400px;
height: 200px;
left: 50%;
position: absolute;
margin-top: -230px;
margin-left: -250px;
font-size: 40px;
font-family: 'Mukta', sans-serif;
}
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: left;
margin-left: 10px;
color: #4b4a55;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
.container:hover input ~ .checkmark {
background-color: #ccc;
}
.container input:checked ~ .checkmark {
background-color: #4b4a55;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
h1{
color: #4b4a55;
margin-top: 8px;
text-align: center;
font-size: 40px;
margin-bottom: 15px;
}
#button {
border-radius: 8px;
}
#button {
transition-duration: 0.6s;
}
#button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
#button {
display: inline-block;
border-radius: 4px;
background-color: #4b4a55;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 23px;
padding: 10px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
}
#button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
#button:hover span {
padding-right: 25px;
}
#button:hover span:after {
opacity: 1;
right: 0;
}
input[type=number] {
width:100%;
text-align: center;
border-radius: 8px;
padding:10px;
}