0xD34F

const rectLeftTop = [ 50, 50 ];
const rectSize = 450;
const step = 15;
let [ x, y ] = rectLeftTop;

setInterval(() => {
  if (rectLeftTop[1] <= y && x === rectLeftTop[0]) {
    y = Math.min(y + step, rectLeftTop[1] + rectSize);
  }

  if (rectLeftTop[0] <= x && y === rectLeftTop[1] + rectSize) {
    x = Math.min(x + step, rectLeftTop[0] + rectSize);
  }

  if (rectLeftTop[1] < y && x === rectLeftTop[0] + rectSize) {
    y = Math.max(y - step, rectLeftTop[1]);
  }

  if (rectLeftTop[0] < x && y === rectLeftTop[1]) {
    x = Math.max(x - step, rectLeftTop[0]);
  }

  block.style.left = `${x}px`;
  block.style.top = `${y}px`;
}, rectSize / step);

const directions = [
  [  0, -1 ],
  [ -1,  0 ],
  [  0,  1 ],
  [  1,  0 ],
];
let iDirection = 0;

const coords = [ 50, 50 ];
const step = 15;
const rectSize = 450;
const rect = [ [...coords], coords.map(n => n + rectSize) ];

(function move() {
  const d = directions[iDirection].map(n => n * step);
  coords.forEach((n, i, a) => a[i] = Math.max(rect[0][i], Math.min(rect[1][i], n + d[i])));

  if (coords.every((n, i) => rect.some(m => m[i] === n))) {
    iDirection = (iDirection + 1) % directions.length;
  }

  block.style.left = `${coords[0]}px`;
  block.style.top = `${coords[1]}px`;

  requestAnimationFrame(move);
})();

.block {
  transition: all 750ms linear;
}

const positions = [
  [  50,  50 ],
  [  50, 500 ],
  [ 500, 500 ],
  [ 500,  50 ],
];
let iPosition = -1;

move();
block.addEventListener('transitionend', move);
setTimeout(move, 0);

function move() {
  iPosition = (iPosition + 1) % positions.length;
  const [ x, y ] = positions[iPosition].map(n => `${n}px`);
  block.style.left = x;
  block.style.top = y;
}

.block {
  animation: move 3s infinite linear;
}

@keyframes move {
  0%, 100% {
    left: 50px;
    top: 50px;
  }
  25% {
    left: 50px;
    top: 500px;
  }
  50% {
    left: 500px;
    top: 500px;
  }
  75% {
    left: 500px;
    top: 50px;
  }
}

<svg viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" width="550" height="550">
  <rect width="50" height="50" fill="red">
    <animateMotion
      dur="3s"
      repeatCount="indefinite"
      path="M50,50 L50,500 L500,500 L500,50 L50,50 z"
    />
  </rect>
</svg>