I’m trying to animate an html form. For now I am trying to make the form rise from a lower position on the screen to a higher one. Eventually I would like to animate individual input elements in the form. Anyway, here’s the code:
<!Doctype html>
<html>
<title>
CSS Practice
</title>
<style>
html, body
{
width: 100%;
height: 100%;
margin: 0%;
}
#LoginForm
{
background-color: red;
padding: 10%;
width: 20%;
height: 20%;
margin: auto;
animation-name: riseOutOfNowhere;
animation-duration: 1.5s;
}
@keyframes riseOutOfNowhere
{
0%{ top: 10px;}
100%{ top: 0px;}
}
</style>
<body>
<form id = "LoginForm">
<input id = "username" type = "text" placeholder = "Username">
</input> </br> </br>
<input id = "password" type = "text" placeholder = "Password">
</input> </br> </br>
<input id = "login" type = "button" value = "Login">
</input> </br> </br>
<input id = "createAccount" type = "button" value = "Create Account">
</input>
</form>
</body>
</html>
Why did this not work? How should I go about making the form rise from one point to another?