聚焦/未聚焦时过渡不起作用

Question

Here，3秒钟的过渡正常。

但是here，完全没有过渡。当我聚焦时，标签将立即居上，与未聚焦时一样，它将立即往下：

span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em 0;
  padding-left: -5px;
  transition: top 3s ease 
}

input:focus + label > span {
  top: -20px;
  font-size: 11px;
  padding-bottom: 16px; 
}

Answer 1

这里的问题是span没有默认的top值。

您需要将top:0添加到CSS。

span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em 0;
  padding-left: -5px;
  transition: top 3s ease/*, font-size .5s ease*/; 
 /* transition: transform 1s 2s;*/
  top:0;
}