CSS transition between left - right and top - bottom positions

Question

Is it possible to use CSS transitions to animate something between a position set as left  0px to right  0px so it goes all the way across the screen  I need to accomplish the same thing with top to bottom  Am I stuck calculating the screen width   object-size    nav       position  absolute      top  0px      left  0px      width  50px      height  50px      -webkit-transition  all 0 5s ease-out      moveto       top  0px      right  0px      and then I use jQuery s  addClass

User · Answer

For elements with dynamic width it s possible to use transform  translateX -100    to counter the horizontal percentage value  This leads to two possible solutions   1  Option  moving the element in the entire viewport   Transition from   transform  translateX 0     to  transform  translateX calc 100vw - 100        x000D   x000D   viewportPendulum   x000D    position  fixed  x000D    left  0  x000D    top  0  x000D    animation  2s ease-in-out infinite alternate swingViewport  x000D       just for styling purposes    x000D    background   c70039  x000D    padding  1rem  x000D    color   fff  x000D    font-family  sans-serif  x000D    x000D   x000D   keyframes swingViewport   x000D    from   x000D      transform  translateX 0   x000D      x000D    to   x000D      transform  translateX calc 100vw - 100     x000D      x000D    x000D   lt div id  viewportPendulum  gt Viewport lt  div gt  x000D   x000D   x000D    2  Option  moving the element in the parent container   Transition from   transform  translateX 0   left  0    to  left  100   transform  translateX -100       x000D   x000D   parentPendulum   x000D    position  relative  x000D    display  inline-block  x000D    animation  2s ease-in-out infinite alternate swingParent  x000D       just for styling purposes    x000D    background   c70039  x000D    padding  1rem  x000D    color   fff  x000D    font-family  sans-serif  x000D    x000D   x000D   keyframes swingParent   x000D    from   x000D      transform  translateX 0   x000D      left  0  x000D      x000D    to   x000D      left  100   x000D      transform  translateX -100    x000D      x000D    x000D   x000D   wrapper   x000D    padding  2rem 0  x000D    margin  2rem 15   x000D    background   eee  x000D    x000D   lt div class  wrapper  gt  x000D     lt div id  parentPendulum  gt Parent lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Demo on Codepen  Note  This approach can easily be extended to work for vertical positioning  Visit example here

User · Answer

This worked for me on Chromium  The   for translate is in reference to the size of the bounding box of the element it is applied to so it perfectly gets the element to the lower right edge while not having to switch which property is used to specify it s location   topleft     top  0     left  0     bottomright     top  100     left  100     -webkit-transform  translate -100  -100

User · Answer

In more modern browsers  including IE 10   you can now use calc      moveto     top  0px    left  calc 100  - 50px

User · Answer

You can animate the position  top  bottom  left  right  and then subtract the element s width or height through a CSS transformation  Consider   x000D   x000D      animate   on  click   function        this  toggleClass  move       x000D        animate           height  100px          width  100px          background-color   c00          transition  all 1s ease          position  absolute          cursor  pointer          font  13px 100px sans-serif          color  white          text-align  center                                               just to position things            animate left     left  0    top  50    margin-top  -100px          animate right    right  0   top  50             animate top      top  0     left  50            animate bottom   bottom  0  left  50   margin-left  -100px            animate left move           left  100            transform  translate -100   0                   animate right move           right  100            transform  translate 100   0                   animate top move           top  100            transform  translate 0  -100                    animate bottom move           bottom  100            transform  translate 0  100            x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  Click to animate  lt div class  animate left  gt left lt  div gt   lt div class  animate top  gt top lt  div gt   lt div class  animate bottom  gt bottom lt  div gt   lt div class  animate right  gt right lt  div gt  x000D   x000D   x000D   And then animate depending on the position

[css] CSS transition between left -> right and top -> bottom positions

1. Option: moving the element in the entire viewport:

2. Option: moving the element in the parent container:

Demo on Codepen

Examples related to css

Examples related to css-transitions