DingDong DingDong -4 years ago 108
CSS Question

How to animate input box from page center to the top of the page on input focus in css?

I think this is very simple, but I'm not sure how it's implemented. So let's say I have an input field that is originally centered to the page (vertically & horizontally). However, I want to animate the input box to the top of the page when the user starts typing, how would this be implemented? My initial thought would be to assign the

top:0
and transform it on focus. Is it more complex than that?

Please enlighten me.



input.input-student-search {
position: absolute;
top: 50%;
transform: translateY(0px);
padding: 27px 145px 27px 38px;
margin: 10px;
width: 100%;
border: none;
box-shadow: 0 10px 20px rgba(198, 198, 198, 0.02), 0 6px 6px rgba(221, 221, 221, 0.23);
border-radius: 6px;
text-align: left;
&:focus {
top: 0;
}
}




Answer Source

This is how I did it:

.txt {
    position: relative;
    text-align: center;
    width: 90%;
    margin: 0 20px 0 20px;
    top: 200px;
    transition: top 0.4s;
}

.txt:focus{
    top:0;
}

Here is the JSFiddle demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download