html - 如何在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