Input Animations with HTML and CSS | Input Label Animation

today i'm going to show you how to build this input animation from scratch let's get started so to get started i'm opening up a codepen project at the top of the html i already have a head tag with a link to the font family i'm going to use for this project and then beneath that i have body tags which are empty so to get started i'm going to jump inside of the body tags of the html and first i'm going to create a div with a class of form and this will essentially hold the entire element on the page and then within that form i'm going to have two elements i'm going to have an input and a label so first i'm going to include an input with a type of text it will have an id of email because it will be an email input field i'm going to give it a class of form input and i'm also going to set auto complete to off next i'm going to work on the label for the input so beneath this i'm going to create a label element and it's going to be for that email so i'm going to put the email id here and for this i'm going to give it a class of form label and i want this to include the actual label that we want to be visible to the user so here i'm going to write the word email great so now we have an input field and a label on the page so now we can jump inside of the css to start applying styling to the project so first i add scss as a preprocessor which allows me to nest css elements so that way my code will be really organized and it also allows you to declare variables so i already picked all the color variables that i want for this project so i'm just going to paste them here so now i have all my colors defined for the project and also a border radius and so beneath this i'm just going to add some basic styling i usually add a box sizing set to border box and a margin and padding set to zero so that way i have full control over the spacing in the project so beneath this i'm actually going to get started on the styling so first i'm going to reference the body and first i'm going to add the font family i want to use for this project so i'm just going to reference the font family and set it to the font that i already defined in the header then i'm going to set the height of it to 100 of the viewport height and i'm also going to set the display of it to grid now if you're brand new to grid i have an entire crash course video that goes over all the basics so if you're interested in watching that video i'll link it in the description below and with the display set to grid i'm going to justify the content and align the items in the center so that way they'll be in the center of the page i'm also going to increase the font size to 1.2 rem and set a particular background color then beneath this i'm going to start working on the actual form so referencing the html we have a div class of form and then we have a form input for the input and a form label for the label so now i'm going to reference these classes in the css so here i'm going to write form and for that form i'm going to set the position of it to relative and i'm also going to specify the width to 20rem then within this form i'm going to reference the input by writing an input and again the reason why i can do this is because i added scss as a preprocessor here so for that input i'm going to set the position of it to absolute i'm going to set the top and left positioning to zero i'm going to set the width to 100 percent the height to 100 percent i'm also going to add a border of 2 pixels solid and a light gray i'm also going to add a border radius now if i were to type inside of this input field you can see that it does not have the different font family that we added on earlier in the project so to fix that i'm going to set the font family to inherit and the font size to inherit so now if i were to type inside of that input field you can see that the text has different styling i'm also going to set the color to white that line to none and i'm going to increase the padding i also don't want there to be a background for the input field so i'm going to set the background to none so now we just have this outline i actually want to increase that border radius a little bit so i'm going to go back up to my variable and just set this 2.5 then beneath this i'm going to add some hover and focus states for that input field so i'm going to write and hover which attaches a hover state to this input element and for this hover state i'm going to add a different border color and for the focus date i'm also going to add a different border color so we can see now when i hover over it the color changes slightly and when i tap into it it's a different color as well next i'm going to work on the label now it's a little bit difficult to see right now because a label is set to a dark color and the background is dark as well but it's right here so i'm going to apply some styling to that so beneath this i'm going to write and label which references the class for that label and for this i'm going to set the position of it to absolute because i want full control over the placement of that label for this label i'm going to set a particular left and top positioning i'm going to set some padding and i'm going to set the color to white now you can see that when the mouse is actually over that word email it looks one way but when it's over the entire input field it looks different so i want it to be consistent so here i'm going to set the cursor to text so that way if i'm over that word email it looks the same as it does when it's over the input field i'm also going to add a transition here because i'm going to want it to transition from looking like a placeholder to going upwards so here i'm going to add a transition for the top left and the font size and i want all these transitions to occur at the same time so i'm going to keep the timing the same and the easing function the same so now if i type inside of that input field we obviously there's an issue because there's an overlap between the label and the input content going back to the html since the label is going to act like the placeholder for that input field i'm actually going to set the placeholder here to an empty string and i actually want the entire element to be a little taller so here under the width i'm also going to specify the height 2 3 rem great so now we can actually start working on the functionality for this input field so if i were to tap inside of this input field we can see that it has the focus state and if i were to type inside of it we obviously see that there is overlap so for this input field i want to modify this label when this is in the focus date i want the email to go up and i want it to be a smaller font size so beneath all this work i'm going to reference the form input so when that input is in the focus state i want it to change a sibling element so i'm going to add the sibling selector and the element that i want to change is the form label so going back up to the html we can see that the input and the label are sibling elements because they're on the same level playing field right so input is right next to label it's not like label is nested inside of a div or any other kind of element so because these elements are side by side i can use that sibling selector to call it so i'm basically saying here is that when this input is in the focus state i want to change this label so what do i want to change about this label well i want to move its position i want it to go up and i want the font size to be reduced so here i'm going to set the top to a negative 0.5 rem so let's see what happens if i tap into it we can see that it moves upwards now i also want to change the font size so here i'm going to change the font size to 0.8 rem so now if i tap into it we can see that it gets smaller i'm also going to want to modify the left position slightly so i'm also going to set the left to .8 rem so now if i tap into it we can see how it animates now we have an issue because there's an overlap between the input and the label so in order to fix that i'm going to go under that label and i'm going to set the background color to the same background color of the page so now if we tap into it it has a background color so we can clearly see that label great so now i can freely type inside of this input field and it looks really good but when i tap away from it the email goes back to its original position because what we said here was that when that form input is in the focus state i want the label to be in this position but now if there's actually content within that input field i don't want the label to go back to the original position i want it to stay in this position so we need to expand on this code a little bit so i want to retain this position when there's content within that input field so i'm going to add a comma because i'm going to want to add the styling to another state so here i'm going to say form input and then i'm going to add the not selector and then i'm going to say placeholder shown so this is basically saying that when the form input is not showing a placeholder which means that there's content inside of it and the form input is not in the focus state which means that i clicked outside of it i also want the form label to have that same treatment so here i'm saying sibling form label so what this is basically saying is that when that form input is not showing the placeholder meaning that there's some content within it and that form input is not in the focus state which means that i tapped outside of it and i'm on another element i still want that form label to have that same treatment so now we can actually see that it changed i see that label and the content so now i know it's working because i see that email and that content now if i were to just delete this knot for a second it might be a little clearer so i'm just going to delete this knot so here i wrote form input placeholder shown which means if the placeholder is shown and the element is not in the focus state i want the form label to be in the state so that's the state that we have right now so i deleted all the content there's nothing in the input field and if i were to tap away from it meaning that the focus is not on that element we can see that it still holds that state but i don't want it to look like this when there's no content in here i only want this to be in the state when there is some content in here so that's why i added the not so now we have a label and when i tap into it i can write some text and when i tap away from it it still retains that state so there you go that's how i created this animating input field from scratch please let me know if you have any questions on the topic and subscribe to stay up to date with my latest content thanks for watching you

Channel: Angela Delise

Views: 16,799

Rating: 4.9537573 out of 5

Keywords: input animation, input label animation, text area animation, input animation html css, input animation web, input animation webdev, webdesign input field, ui design input field, input field animation, input field animate, html css input field, input form, input form html css, form html css, sign in html css, sign up page html css, text field html css, input area html css, transition css, css transition, material input animation, material design input, material input label

Id: v8mRUU3orjI

Length: 11min 47sec (707 seconds)

Published: Mon Jan 18 2021