悬停时，沿父元素边界/路径为html元素设置动画

Question

是否可以沿父元素（div）的边界悬停动画html元素（div）？实际上，我已经回答了该问题的第一部分，但是我无法使动画从某个点开始发生，然后在鼠标关闭时动画回到起点。我可能试图将CSS推得太远。但这有可能吗？如果您在示例代码中注意到，将鼠标悬停在该小框上时，该小框会跳到拐角处并开始平滑地进行动画处理，然后将鼠标移开后，它会突然捕捉回到原始位置。我也尝试过对位置属性进行动画处理，但仍然行不通。这是我所能获得的最接近的。

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>

example image