Animating Form Elements CSS

Animating Form Elements CSS
0.0 0

#1

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?


#2

Try to change position property of your "LoginForm " to relative .

I hope this should work.

And since you said that you want to animate individual input elements I think you should create another class for input elements.

<!Doctype html>
<html>
	<title>
		CSS Practice
	</title>
	
	<style>
		
		html, body
		{
			width: 100%;
			height: 100%;
			margin: 0%;
		}
		
		#LoginForm
		{	
			position: relative;
			background-color: red;
			padding: 10%;
			width: 20%;
			height: 20%;
			margin: auto;
		}
		.input {
			position: relative;
			animation-name: riseOutOfNowhere;
			animation-duration: 1.5s;
		}
		@keyframes riseOutOfNowhere
		{
			0%{ top: 0px;}
			50%{ top: 50px;}
			100%{top: 0px;}
		}
		
	</style>
	
	<body>
		<form id = "LoginForm">
			<div class="input">
			<input id = "username" type = "text" placeholder = "Username">
			</input>
			</div>
			 </br> </br>

			<div class="input">
			<input id = "password" type = "text" placeholder = "Password">
			</input>
			</div>

			 </br> </br>
			<div class="input">
			<input id = "login" type = "button" value = "Login">
			</input>
			</div>
			 </br> </br>
			<div class="input">
			<input id = "createAccount" type = "button" value = "Create Account">
			</input>
			</div>
		</form>
	</body>
</html>

I’m not sure how you want it to look like but I think this will work.


#3

It works, thanks