相対位置を変更すると、ホバートランジションが機能しません。

Question

絶対に配置されたdivにカーソルを置いたときに遷移時間を追加しようとすると、その上に20pxが追加されます。ホバー効果は働いていますが、移行時間は有効ではありません。

SCSS：

div { 
    position: relative; 
    margin: 0 auto; 
    height: 400px; 
    width: 300px; 
    background-color: grey; 
    transition: all 5s; 
    &:hover { 
    top: 20px; 
    } 
} 

CodePen：0PXへtopプロパティのhttps://codepen.io/KevinM818/pen/YYZqKY

Answer 1

初期値を設定。

div { 
    position: relative; 
    margin: 0 auto; 
    height: 400px; 
    width: 300px; 
    background-color: grey; 
    transition: all .5s; 
    top: 0px; 
    &:hover { 
    top: 20px; 
    } 
} 

CodePen：https://codepen.io/anon/pen/opZxzo