cssの入力フォーカスで、ページ中心からページ上部に入力ボックスをアニメーション化する方法はありますか？

Question

これは非常に簡単だと思いますが、どのように実装されているのかわかりません。だから、私は元々はページの中心にある入力フィールドを持っているとしましょう（水平方向には&）。しかし、ユーザーが入力を開始したときに、入力ボックスをページの先頭に移動したい場合、どのように実装されますか？私の最初の考えは、top:0を割り当てて、それをフォーカスに変えることです。それはそれより複雑ですか？

私に教えてください。

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 1

をこれは私がそれをやった方法です：

.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

Answer 2

だけ:focusスタイルでtop:0を置く：

input.input-student-search:focus { 
    top:0; 
} 

input.input-student-search { 
 
    background-color:#AAA; 
 
    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; 
 
    transition:top 1s linear; 
 
} 
 
input.input-student-search:focus { 
 
    top:0; 
 
}

<input class="input-student-search" type="text"/>