Css Move element from left to right animated

Question

I have an element that needs to be move from left to right and right to left when I change the left  right variables   Here is an jsfiddle example that I m working on it  It moves left to right and right to left but there is no animation   What I am doing wrong   CSS   Demo JSFiddle  div      width 100px     height 100px     background red     transition-property  right  left     transition-duration  2s     -webkit-transition-property  right  left     Safari       -webkit-transition-duration  2s     Safari       position absolute    div hover      right 0px      HTML    lt body gt    lt p gt  lt b gt Note  lt  b gt  This example does not work in Internet Explorer 9 and earlier versions  lt  p gt    lt div gt  lt  div gt    lt p gt Hover over the div element above  to see the transition effect  lt  p gt    lt  body gt

User · Answer

Try this   x000D   x000D  div x000D    x000D    width 100px  x000D    height 100px  x000D    background red  x000D    transition  all 1s ease-in-out  x000D    -webkit-transition  all 1s ease-in-out  x000D    -moz-transition  all 1s ease-in-out  x000D    -o-transition  all 1s ease-in-out  x000D    -ms-transition  all 1s ease-in-out  x000D    position absolute  x000D    x000D  div hover x000D    x000D    transform  translate 3em 0   x000D    -webkit-transform  translate 3em 0   x000D    -moz-transform  translate 3em 0   x000D    -o-transform  translate 3em 0   x000D    -ms-transform  translate 3em 0   x000D    x000D   lt p gt  lt b gt Note  lt  b gt  This example does not work in Internet Explorer 9 and earlier versions  lt  p gt  x000D   lt div gt  lt  div gt  x000D   lt p gt Hover over the div element above  to see the transition effect  lt  p gt  x000D   x000D   x000D    DEMO

User · Answer

You should try doing it with css3 animation  Check the code bellow    lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt   div       width  100px      height  100px      background  red      position  relative      -webkit-animation  myfirst 5s infinite     Chrome  Safari  Opera        -webkit-animation-direction  alternate     Chrome  Safari  Opera        animation  myfirst 5s infinite      animation-direction  alternate        Chrome  Safari  Opera     -webkit-keyframes myfirst       0     background  red  left  0px  top  0px       25    background  yellow  left  200px  top  0px       50    background  blue  left  200px  top  200px       75    background  green  left  0px  top  200px       100   background  red  left  0px  top  0px       keyframes myfirst       0     background  red  left  0px  top  0px       25    background  yellow  left  200px  top  0px       50    background  blue  left  200px  top  200px       75    background  green  left  0px  top  200px       100   background  red  left  0px  top  0px      lt  style gt   lt  head gt   lt body gt    lt p gt  lt strong gt Note  lt  strong gt  The animation-direction property is not supported in Internet Explorer 9 and earlier versions  lt  p gt   lt div gt  lt  div gt    lt  body gt   lt  html gt    Where  div  is your animated object   I hope you find this useful   Thanks

User · Answer

It s because you aren t giving the un-hovered state a right attribute   right isn t set so it s trying to go from nothing to 0px  Obviously because it has nothing to go to  it just  warps  over   If you give the unhovered state a right 90    it will transition how you like   Just as a side note  if you still want it to be on the very left of the page  you can use the calc css function   Example   right  calc 100  - 100px                         width of div   You don t have to use left then   Also  you can t transition using left or right auto and will give the same  warp  effect    x000D   x000D  div   x000D      width 100px  x000D      height 100px  x000D      background red  x000D      transition 2s  x000D      -webkit-transition 2s  x000D      -moz-transition 2s  x000D      position absolute  x000D      right calc 100  - 100px   x000D    x000D  div hover   x000D    right 0  x000D    x000D   lt p gt  x000D     lt b gt Note  lt  b gt  This example does not work in Internet Explorer 9 and earlier versions  x000D   lt  p gt  x000D   lt div gt  lt  div gt  x000D   lt p gt Hover over the red square to see the transition effect  lt  p gt  x000D   x000D   x000D    CanIUse says that the calc   function only works on IE10

[html] Css Move element from left to right animated

Examples related to html

Examples related to css