title: On hover animate a html element along the parent element boundaries/path
body: <p>Is it possible to on hover animate an html element (a div) along the boundary of a parent element (a div)? Actually I have kind of answered the first part of this question, but I am having trouble getting the animation to occur from a certain point, then animate back to the starting point on mouse off. I may be trying to push CSS a little too far. But is this possible? If you notice in the sample code when you mouseover the little box jumps to the corner and starts animating smoothly, then off mouse off it abruptly snaps to back to the original position. I have tried animating the position attribute as well, still no go. This is the closest I have been able to get. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 &gt; 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); } }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div&gt;
     &lt;div class="ignite" style="padding: 5px;height: 100px; width: 100px; position: relative;"&gt;
      &lt;div class="sqwr-orbit" id="square"&gt;&lt;/div&gt;
      &lt;div style="position: absolute; border: 1px solid #fff; top: 8px; left: 10px; width: 80%; height: 84%;"&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/1oLqG.png" rel="nofollow noreferrer">example image</a></p>