Using animations improves user engagement. In this article, you will learn how to create an awesome input animation using HTML & CSS, with free access to full source code and a proper code explanation.
Animations are a powerful tool that allows you to control the motion and display of elements on your web pages. It consists of two parts: a style describing the CSS animation and a group of keyframes that define the styles at the start and end of the animation.
But you have to be very careful when using animations. Too much of anything can be dangerous. Do not overuse animated elements, and make sure they do not negatively impact the user experience.
You can use animations to grab users’ attention and make your website stand out. It can achieve the impossible and convey your message easily, as people retain animated messages for a long time.
Some disadvantages of using animations are that they can slow down load speeds and be distracting and confusing. This can be resolved if you use animations properly and effectively.
Table of Contents
Introduction
In this article, you will learn how to create an awesome input animation using HTML & CSS by following a simple step-by-step procedure to improve the user experience and interaction.
You can further apply this knowledge to make different animated elements, for example, hover animations, color animations, etc.
Animations provide great flexibility, which is good for SEO. The longer users spend on your website, the better its search engine ranking is.
Visual appeal is as important as providing informative and valuable content. Let us start making an awesome input animation using HTML & CSS without delay.
We will be creating a floating animation; when clicked on the input field, the label will float above, and then we will have extra space for typing the input.
Watch the full tutorial on YouTube
If you prefer watching video tutorials over reading articles, you can watch a full tutorial on Awesome Input Animation using HTML & CSS on my YouTube channel. You can access the full source code here if needed. While you are at it, do subscribe and like the content.
Source code for the Awesome Input Animation using HTML & CSS
Creating the HTML Structure
The first step is to create a file named index.html with a basic boilerplate code for the input animation.
Inside the body section, create a div with the class name ‘container’, and then create two divs inside it with the class name ‘inputs’.
The inputs div contains an input tag with the appropriate type attribute, and you can optionally add the required attribute. Finally, add a lsabel tag with a suitable name.
Refer to the following HTML code and paste it into index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Input Animation</title>
</head>
<body>
<div class="container">
<div class="inputs">
<input type="text" required>
<label>Username</label>
</div>
<div class="inputs">
<input type="password" required>
<label>Password</label>
</div>
</div>
</body>
</html>Styling with CSS
First, start by creating a file named style.css and then linking it to the HTML code. This is necessary for the styles to be applied.
Now, style the body element to take up the full height of the viewport, display as flex, centered on the screen, and have a background of rgb (255, 236, 69).
The container div is styled to have a width of 400px, padding of 30px from all sides, a border radius of 10px, and a white background. Also, the inputs div is styled to have a height of 40 pixels, a width of 100%, relative positioning, and an appropriate margin for extra spacing.
Now, style the input element to have a width of 100%, a height of 40px, no border or outline, a border-bottom thickness of 2px solid with gray color, a font size of 16px, and a transition of 0.3 seconds to change the border color to crimson on focus.
Finally, I style the label with absolute positioning, a font size of 16px, and a transition of 0.3 seconds to change the color of the label text to crimson and transform the label with a translateY of -23px.
Copy and paste the following CSS code in style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgb(255, 236, 69);
}
.container{
width:400px ;
background: white;
padding: 30px;
border-radius: 10px;
}
.container .inputs{
height: 40px;
width: 100%;
position: relative;
margin-bottom: 30px;
}
.container .inputs input{
width: 100%;
height: 40px;
border: none;
border-bottom: 2px solid gray;
outline: none;
font-size: 16px;
transition: 0.3s;
}
.container .inputs input:focus{
border-color: crimson;
}
.container .inputs label{
position: absolute;
bottom: 10px;
left: 0;
pointer-events: none;
font-size: 16px;
transition: 0.3s;
}
.container .inputs input:focus ~ label,
.container .inputs input:valid ~ label{
transform: translateY(-23px);
color: crimson;
}That’s all you need to do to create an awesome input animation using HTML & CSS. You can access the full source code with images in the video tutorial by clicking the below button.
Conclusion
This article taught us about awesome input animation using HTML & CSS. If you are still stuck somewhere or have any doubts regarding the same, feel free to leave your question in the comment section. I will be happy to help.
After this, you will be able to create amazing and good-looking registration and login forms. You can even incorporate new animations into your website that will increase user retention.
Do Visit: Accurate YouTube Home Page Using HTML and CSS – Coding Power
FAQ
How do you create an input label?
To create an input label, first create an input tag with the appropriate type attribute and optionally add the required attribute. Next, add a label tag with a suitable name.
How to make animation in CSS and HTML?
To make an animation in CSS and HTML, you need an HTML element with a class name associated with it.
Then use the transform property to add a simple motion effect or a group of keyframes that define the styles at the start and end of the animation.
What is the transform property?
It is a CSS property for changing page elements’ shape, position, and orientation.