Eye Blink

<div style="text-align:center">
<svg id="svgFive" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
 <defs>
  <linearGradient id="svg_4">
   <stop offset="0" stop-opacity="1" stop-color="#000000"/>
   <stop offset="0.5" stop-color="#00ffff"/>
   <stop offset="1" stop-opacity="1" stop-color="#000000"/>
  </linearGradient>
 </defs>
<g>
<rect width="500" height="500" fill="url(#svg_4)"/><rect width="500" height="500" x="500" fill="url(#svg_4)"/>
<animateMotion from="0,0" to="-500,0" begin="0s" dur="3s" repeatcount="indefinite"/>
</g>
<image xlink:href="https://lh3.googleusercontent.com/d3wpGMvgFS5Vk2wreA7938tchJf5r3sfaoQJwlWJvUfScvBd-yLZ_-jP4HuwE4WHlvmw4bW4NdscIHWTotpGzu4Uu5Vunu1lHZPz91AeLT182JRFH808izTeZuZs3--YLEjuQgKXaL7hoPrBvRo_9eJl6n93M3TBzt0-9U9CbHTROtPhjxp7rNY-IazI1o6Q2yhaLFDxB7VArEA5DtyJBJhi7SbDjo-YTR3ECBHwXvstB2UlucuxdSR2CFXEV2b9MuIvqhM_YXCXewBVNv1C3oMipYlepmO4x-xtoOA5IlKbP9p60F6_Tvp4hzmv8ae8gPdZsIxhTGhAmdoxZ0UYdoi0AI8PY-0EnGLd5eilN5eqnPQP_U6NmXdT7OzIeMBarnM0YEgTqlfOsRWWtlxrGI5EoMvgY4FTql0TzqgHCE9tfQ-HQ-Hrpqg9vGUEMghpyoM5tg57BrjfbaPWoOQLqVHUE9IeEK-z6dfWKL8esT7uCWq9_M8Z-Y6tyd83Dn9eAN20Xdtyq7JWIXIOVbPM1C8fuI9QvfCEQcrOwZpCTXdxJSPuRfQXRLHViL5BGieGhq3f3gmxmBLRn1lSVguQXmni9rr7XKNYcajZwaguXb6DP0E=s500-no" width="500" height="500"/>
</svg>
<br/>
<button onclick="myFunction5()">Start !</button>
</div>

<script>

function myFunction5() {
var svgns = "http://www.w3.org/2000/svg";
for (var i = 0; i < 2; i++) {
    var r = Math.random() * 50; var strokewidth = Math.random() * 30;
    var strokedash = Math.random() * 40;

    var circle = document.createElementNS(svgns, 'circle');
    circle.setAttributeNS(null, 'id', 'roll11');
    circle.setAttributeNS(null, 'r', r);
    circle.setAttributeNS(null, 'fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
    circle.setAttributeNS(null, 'opacity', '0.75');
    circle.setAttributeNS(null, 'stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
    circle.setAttributeNS(null, 'stroke-width', strokewidth);
    circle.setAttributeNS(null, 'stroke-dasharray', strokedash);
    document.getElementById('svgFive').appendChild(circle);

    var circle = document.createElementNS(svgns, 'circle');
    circle.setAttributeNS(null, 'id', 'roll22');
    circle.setAttributeNS(null, 'r', r);
    circle.setAttributeNS(null, 'fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
    circle.setAttributeNS(null, 'opacity', '0.75');
    circle.setAttributeNS(null, 'stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
    circle.setAttributeNS(null, 'stroke-width', strokewidth);
    circle.setAttributeNS(null, 'stroke-dasharray', strokedash);
    document.getElementById('svgFive').appendChild(circle);

}}

</script>

<style>

  #roll11 {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transform: translate3d( 145px, 215px, 0px );
    -moz-transform: translate3d( 145px, 215px, 0px );
    -ms-transform: translate3d( 145px, 215px, 0px );
    transform: translate3d( 145px, 215px, 0px ) rotate(0deg) scale(1, 1);
  }

  #roll11:hover {
   -webkit-transform: translate3d( 145px, 215px, 0px ) rotate(180deg);
   -moz-transform: translate3d( 145px, 215px, 0px ) rotate(180deg);
   -ms-transform: translate3d( 145px, 215px, 0px ) rotate(180deg);
   transform: translate3d( 145px, 215px, 0px ) rotate(180deg) scale(2, 2);
  }

  #roll22 {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transform: translate3d( 355px, 215px, 0px );
    -moz-transform: translate3d( 355px, 215px, 0px );
    -ms-transform: translate3d( 355px, 215px, 0px );
    transform: translate3d( 355px, 215px, 0px ) rotate(0deg) scale(1, 1);
  }

  #roll22:hover {
   -webkit-transform: translate3d( 355px, 215px, 0px ) rotate(-180deg);
   -moz-transform: translate3d( 355px, 215px, 0px ) rotate(-180deg);
   -ms-transform: translate3d( 355px, 215px, 0px ) rotate(-180deg);
   transform: translate3d( 355px, 215px, 0px ) rotate(-180deg) scale(2, 2);
  }

</style>