CSS Transition doesn't work with top, bottom, left, right

Try setting a default value in the css (to let it know where you want it to start out)

CSS

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */

Perhaps you need to specify a top value in your css rule set, so that it will know what value to animate from.

In my case div position was fixed , adding left position was not enough it started working only after adding display block

left:0; display:block;