CODEWITHSUNDEEP
htmlcss
yalpsid
yalpsid

Reputation: 235

transition not working when focus/unfocus

Here, the 3 seconds transistion is working fine.

but here, no transition at all. When I focus, the label will go top right away, same as when unfocus, it will go down right away:

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; 
}

Upvotes: 1

Views: 65

Answers (1)

VVV
VVV

Reputation: 7593

The problem here is that span does not have a default top value.

You need to add top:0 to your 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;
}

Upvotes: 2

Related Questions