CSS Transition doesn t work with top bottom left right

Question

I have an element with style position  relative  transition  all 2s ease 0s   Then I want to change its position smoothly after clicking on it  but when I add the style change the transition doesn t take place  instead  the element moves instantly       omre   0  on  click  function           this  style  top  200px          However  if I change the color property  for example  it changes smoothly       omre   0  on  click  function           this  style  color  red          What might be the cause of this  Are there properties that aren t  transitional   EDIT  I guess I should have mentioned that this is not jQuery  it s another library  The code appears to work as intended  styles are being added  but transition only works in the second case

User · Accepted Answer

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

User · Answer

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

User · Answer

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

User · Answer

I ran into this issue today  Here is my hacky solution    I needed a fixed position element to transition up by 100 pixels as it loaded    var delay    ms    gt  new Promise res   gt  setTimeout res  ms    async function animateView startPosition elm     for var i 0  i lt 101  i         elm style top       startPosition-i  px       await delay 1

User · Answer

Something that is not relevant for the OP  but maybe for someone else in the future   For pixels  px   if the value is  0   the unit can be omitted  right  0 and right  0px both work   However I noticed that in Firefox and Chrome this is not the case for the seconds unit  s   While transition  right 1s ease 0s works  transition  right 1s ease 0  missing unit s for last value transition-delay  does not  it does work in Edge however    In the following example  you ll see that right works for both 0px and 0  but transition only works for 0s and it doesn t work with 0    x000D   x000D   box   x000D      border  1px solid black  x000D      height  240px  x000D      width  260px  x000D      margin  50px  x000D      position  relative  x000D    x000D   jump   x000D      position  absolute  x000D      width  200px  x000D      height  50px  x000D      color  white  x000D      padding  5px  x000D    x000D   jump1   x000D      background-color  maroon  x000D      top  0px  x000D      right  0px  x000D      transition  right 1s ease 0s  x000D    x000D   jump2   x000D      background-color  green  x000D      top  60px  x000D      right  0  x000D      transition  right 1s ease 0s  x000D    x000D   jump3   x000D      background-color  blue  x000D      top  120px  x000D      right  0px  x000D      transition  right 1s ease 0  x000D    x000D   jump4   x000D      background-color  gray  x000D      top  180px  x000D      right  0  x000D      transition  right 1s ease 0  x000D    x000D   box hover  jump   x000D      right  50px  x000D    x000D   lt div id  box  gt  x000D     lt div class  jump  id  jump1  gt right  0px lt br gt transition  right 1s ease 0s lt  div gt  x000D     lt div class  jump  id  jump2  gt right  0 lt br gt transition  right 1s ease 0s lt  div gt  x000D     lt div class  jump  id  jump3  gt right  0px lt br gt transition  right 1s ease 0 lt  div gt  x000D     lt div class  jump  id  jump4  gt right  0 lt br gt transition  right 1s ease 0 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Are there properties that aren t  transitional     Answer  Yes   If the property is not listed here it is not  transitional    Reference  Animatable CSS Properties

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

CSS

Examples related to javascript

Examples related to css

Examples related to css-transitions