CSS переход между левым -> правым и верхним -> нижним положениями

Вы можете анимировать положение (сверху, снизу, слева, справа), а затем вычесть ширину или высоту элемента с помощью преобразования CSS.

Рассмотреть возможность:

$('.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>

А затем анимировать в зависимости от положения...

Это сработало для меня на Chromium. % для перевода относится к размеру ограничивающей рамки элемента, к которому он применяется, поэтому он идеально перемещает элемент к нижнему правому краю, не переключая, какое свойство используется для указания его местоположения.

topleft {
  top: 0%;
  left: 0%;
}
bottomright {
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
}

В более современных браузерах (включая IE 10+) теперь можно использовать calc():

.moveto {
  top: 0px;
  left: calc(100% - 50px);
}

Для элементов с динамической шириной можно использовать transform: translateX(-100%); для подсчета горизонтального процентного значения. Это приводит к двум возможным решениям:

1. Вариант: перемещение элемента во всём окне просмотра:

Переход от:

transform: translateX(0);

to

transform: translateX(calc(100vw - 100%));

#viewportPendulum {
  position: fixed;
  left: 0;
  top: 0;
  animation: 2s ease-in-out infinite alternate swingViewport;
  /* just for styling purposes */
  background: #c70039;
  padding: 1rem;
  color: #fff;
  font-family: sans-serif;
}

@keyframes swingViewport {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100vw - 100%));
  }
}

<div id="viewportPendulum">Viewport</div>

2. Вариант: перемещение элемента в родительский контейнер:

Переход от:

transform: translateX(0);
left: 0;

to

left: 100%;
transform: translateX(-100%);

#parentPendulum {
  position: relative;
  display: inline-block;
  animation: 2s ease-in-out infinite alternate swingParent;
  /* just for styling purposes */
  background: #c70039;
  padding: 1rem;
  color: #fff;
  font-family: sans-serif;
}

@keyframes swingParent {
  from {
    transform: translateX(0);
    left: 0;
  }
  to {
    left: 100%;
    transform: translateX(-100%);
  }
}

.wrapper {
  padding: 2rem 0;
  margin: 2rem 15%;
  background: #eee;
}

<div class="wrapper">
  <div id="parentPendulum">Parent</div>
</div>

Демонстрация на Codepen

Примечание. Этот подход можно легко расширить для работы с вертикальным позиционированием. Посетите пример здесь.