Now, it works as far as the animation on the box shadow, but we are currently showing the label. We want to hide that by default, and then we want to show it, and reveal it, make it look like it's sliding down whenever the user clicks on the input or the text area.

Let's start building this out. It actually isn't going to take a lot of code, but it is going to cover a few topics we have not covered up to this point. We're going to take it nice, and slow. Let's come down here, and let's first update the visibility, and opacity values here.

form.css

.form label {
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 2rem;
    margin-top: 0.7rem;
    display: block;
    transition: all 0.3s;
    color: #cea135;
    visibility: hidden;
    opacity: 0;
}

What these styles are going to do is they're just going to make it look like our label is invisible, if you hit refresh, the labels are now hidden.

Now that we have that, let's take care of the form input first.

form.css

.form input:focus {

}

I'm going to show you another selector that we haven't used before, which is the plus sign. This is going to go, and grab the very first value of label, and then from here, it is going to go and apply whatever type of behavior we want. So, it's going to apply these styles.

form.css

.form input:focus + label {
    opacity: 1;
    visibility: visible;
}

Let's just see if that works before we even add the rest of the animation.

If I click on your name, you can see that that pops up. So, that is working nicely. This is good. Now let's build in that animation.

In order to do that we are going to use a tool that is called transform. We've worked with transform before, but in a different way, because here we are looking to transform, and translate a value as opposed to just using transform to perform a skew.

form.css

.form input:focus + label {
    opacity: 1;
    visibility: visible;
    transform: translateY(1rem);
}

What that means is essentially it's going to take the entire value, the entire label, and it is going to move it down the Y-axis, which means it's just going to slide it down one full value.

If it is five pixels, or ten pixels high, it's going to start at the very top of where it would be, and it's going to slide it down by one rem or one value. So, it's just going to essentially take it exactly to where it's at right now, but it's going to move it all the way up to the top.

It's going to make it seem that the placeholder is actually sliding down, changing colors, and is moving. That's all that we're doing. So, let's hit refresh, and now if you click here, you can see that that is working perfectly.

This is exactly what we want it to do. So, this is pretty neat. I'm really liking this, and it works on the email, so that is awesome.

Hopefully, that wasn't too challenging. What I want to do now is apply this to the text area. So, we can just add a comma.

form.css

.form input:focus + label, .form textarea:focus + label {
    opacity: 1;
    visibility: visible;
    transform: translateY(1rem);
}

I click on it, and that looks like it's working. We need some space here, but the animation itself is working perfectly.

Now, I just want to test it out. I'll type in a name, that's looking good, an email, that all looks really nice, and then for the message that is all perfect.

I do not see any changes that need to be made on this whatsoever. So, congratulations if you went through that. You were able to leverage the tools of transform and translate in order to create a really dynamic form experience.

It makes it feel like the user is interacting directly with the form, and it's changing based on their behavior. So, great job.

In the next guide we're going to polish up a few items, and then you're going to be completely done with this entire project, very nice work.