I am not experienced in CSS animations and have limited knowledge about animations. I am trying to create an animation where a grey box slides down from the top line above the login/register section, but currently it only fades in. If anyone can provide any assistance, I would greatly appreciate it. Please test the code in your browser to see how it functions properly. P.S. The animation should trigger when the button is clicked.
If anyone can help with this, I would be very grateful.
var regbutton = document.getElementById('Register_Button');
var regpopup = document.getElementById('cover_for_register');
regbutton.onclick = function () {
"use strict";
regpopup.style.display = "block";
}body{
margin: 0px auto;
}
button, input, p, h1, h2, h3, h4, h5, a{ /* State that these particular elements be "fantasy" */
font-family: Tahoma;
}
#home_container{
margin: 0px auto;
}
#home_left_section{
float: left;
height: 100%;
width: 55%;
background:-webkit-linear-gradient(#2aefff, #ffffff);
}
#home_right_section{
float: right;
height: 100%!important;
width: 45%;
box-shadow: 0px 0px 14px #888;
z-index: 10000;
background-color:aliceblue;
}
#home_right_section h1{
padding-bottom: 25px;
padding-top: 25px;
font-size: 60px;
margin: 0px;
text-align: center;
}
#home_right_section h2{
margin: 0px;
}
#home_right_section hr {
margin: 0px;
}
#login_register_container{
display:inline-block;
width: 100%;
}
#login_container{
text-align: center; /* If border is created, width must be changed */
float: left;
padding-right:50px;
padding-left: 30px;
padding-top: 20px;
margin-right: 0px auto;
background-color: aqua;
}
.login_input_fields{
border-radius:5px;
width: 200px;
padding: 5px;
border: 1px solid #bfbfbf;
font-size: 15px;
}
.register_popup_foot{
}
#register_container{
width: 50%;
float: right;
margin: 0px auto;
text-align:left;
}
#cover_for_register{
display: none;
position:fixed;
height: 52%;
width: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: animateone;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes animateone {
from {min-height:200px; opacity:0}
}
#Register_Button{
z-index: 10000;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
width:100px;
height: 50px;
color: white;
text-align: center;
margin-top: 80px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
#Register_Button_Container{
width: 50%;
float: right;
margin: 0px auto;
text-align:center;
background-color: aqua;
height: 217px;
}<html>
<body>
<head>
<title>Home</title>
<link rel="stylesheet" href="PTrainMeCSS.css">
<meta name="viewpoint" content="width=deive-width" />
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</head>
<div id="home_container">
<section id="home_left_section">
<h1></h1>
</section>
<section id="home_right_section">
<h1>GetFit</h1>
<hr />
<h3 id="welcome_text">Here you can find whatever service you may want throughout the fitness industry</h3>
<hr />
<div id="login_register_container">
<section id="login_container">
<h2>Login</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username / E-Mail" /><br /><br />
<input class="login_input_fields" type="password" name="Password" maxlength="20" placeholder="Password" />
<br />
<br />
<input type="submit" value="Login" />
</form>
<footer class="register_popup_foot">
<a class="register_loginform_foot_text" href="Forgot Password.html">Reset Password</a>
<br />
</footer>
</section>
<div id="Register_Button_Container">
<section>
<button id="Register_Button">Register</button>
</section>
</div>
<div id="cover_for_register">
<section id="register_container">
<h2>Register</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username"/>
<br /><br />
<input class="login_input_fields" type="text" name="E-Mail" placeholder="E-Mail"/>
<br /><br />
<input class="login_input_fields" type="password" name="Password" placeholder="Password"/>
<br /><br />
<label>Age:</label>
<br /> <select type="option" name="Age">
<option></option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select><br /><br />
Security Question: <br /><select type="select" name="Security Question">
<option>Please select one.</option>
<option>What was my school teachers first name?</option>
<option>Whats my favourite chip flavour?</option>
<option>What type was my first car?</option>
<option>What was the name of my first school?</option>
<option>What are my parents names?</option>
<option>How many siblings do i have?</option>
<option>What was the address of my first house?</option>
</select><br /> <br />
Answer: <br /> <input type="text" name="Answer">
<a href="">Why</a><br /><br />
<input type="submit" value="Submit">
</form>
</section>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</body>
</html>