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

Answer 1

You can animate the position (top, bottom, left, right) and then subtract the element's width or height through a CSS transformation.

Consider:

$('.animate').on('click', function(){   $(this).toggleClass("move"); })

     .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%);       }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Click to animate <div class="animate left">left</div> <div class="animate top">top</div> <div class="animate bottom">bottom</div> <div class="animate right">right</div>

And then animate depending on the position...