При наведении мыши анимируйте элемент html вдоль границ / пути родительского элемента

Question

Можно ли при наведении мыши анимировать элемент html (div) вдоль границы родительского элемента (div)? На самом деле я как бы ответил на первую часть этого вопроса, но у меня возникли проблемы с получением анимации из определенной точки, а затем с анимацией вернуться к начальной точке при выключенной мыши. Я, может быть, пытаюсь сделать немного слишком далеко. Но возможно ли это? Если в примере кода вы заметили, что при наведении курсора мышки маленький прямоугольник прыгает в угол и начинает плавно анимироваться, то при выключенном мышке он резко возвращается в исходное положение. Я также попытался анимировать атрибут позиции, но все еще нет go. Это самое близкое, что мне удалось получить.

html, body {
  height: 100%;
  background-color: #000000;
  color: #ffffff; }

.container {
  height: 100%;
  display: flex;
  border: 1px solid green;
  align-items: center;
  justify-content: center; }

.container > div {
  position: relative;
  text-align: center; }

.sqwr-orbit {
  height: 10px;
  width: 10px;
  background: #ffffff;
  margin: 0 auto; }

.ignite:hover #square {
  animation-duration: 12s;
  animation-name: squareorbit;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

@keyframes squareorbit {
  0% {
    margin: 0 50% 0 0; }
  25% {
    margin: 90% 0 0 0; }
  50% {
    margin: 90% 0 0 90%; }
  75% {
    margin: 0 0 0 90%; }
  100% {
    margin: 0;
    transform: rotateZ(1800deg); } }

<div class="container">
		<div>
			<div class="ignite" style="padding: 5px;height: 100px; width: 100px; position: relative;">
				<div class="sqwr-orbit" id="square"></div>
				<div style="position: absolute; border: 1px solid #fff; top: 8px; left: 10px; width: 80%; height: 84%;">
				</div>
			</div>
		</div>
	</div>

пример изображения