positon:ralativeやabsoluteを使ってtransitonする時の注意点

変更前に初期値を設定する必要がある

これだと動かない

.btn{
  background: red;
  transition: all 1s;
}

.btn:hover{
  cursor: pointer;
  background: red;
  transition: all 1s;
  position: relative;
  top: 10px;
}

これで動く

.btn{
  background: red;
  transition: all 1s;
  position: relative;//初期値
  top: 0;//初期値
}

.btn:hover{
  cursor: pointer;
  background: red;
  transition: all 1s;
  top: 10px;//変更後
}