Make magnifying glass follow an oval path with CSS
<p>In the following Fiddle, I would like to have the magnifying glass follow the path of the oval (across the black outline) in a clockwise direction. How can I manipulate the properties to achieve this?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.oval{
  background:url(http://s8.postimg.org/wozw0oq9x/oval.png);
  width:743px;
  height:305px;
  margin-top:20px;
  margin-left:20px;
}

.glass {
 display:block;
    background: url(http://s29.postimg.org/5i2f94m83/magnifying_glass.png);
 width:100px;
 height:83px;
  left: 487px;
    top: -198px;
  
    position: relative;

    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
            animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */   
}

@keyframes myOrbit {
    0%  { transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); }
    50%  { transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); }
    75%  { transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); }
    100%  { transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1); }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="oval"&gt;
&lt;/div&gt;

&lt;div class="glass"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/szq4336q/2/" rel="nofollow">https://jsfiddle.net/szq4336q/2/</a> </p>