title: Convert CSS hover animation to auto animation
body: <p>I write code for shine my web site logo. It work when hover mouse on logo but I want animation auto play for infinite when loading website. I use keyframes but not work and I am confused.</p>
  
  <p>my CSS code:</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>@import url(https://fonts.googleapis.com/css?family=Raleway);
  html{
    font: .9em 'Raleway',sans-serif;
    height: 100%;
    text-align: center;
    background: radial-gradient(50% 0,rgba(255,255,255,.3),rgba(255,255,255,0)), deepskyblue;
    color: rgba(0,0,0,.6);
  }
  p a{
    color: rgba(0,0,0,.6);
  }
  .mask a{
    position: relative;
    display:block;
    width:150px;
    height: 64px;
    text-align:center;
    margin: 50px auto;
    background: ;
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
  }
  .mask a{
    background-position: -140px 0;
    
  }
  .mask a:hover,
  .mask a:focus{
    background-position: 10px 0;
    /*change speed to see in slow motion*/
    transition: all 1s;
  }
  .mask a::after{
    content:'';
    position: absolute;
    pointer-events: none;
    top:0; left:0; right:0; bottom: 0;
    background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
    background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
    background-position: inherit; 
    -webkit-mask: url('http://dev.iamvdo.me/newLogoCSS3create2.png') center;
    mask: url('#mask-firefox');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mask pseudo"&gt;
    &lt;a href="http://css3create.com"&gt;
      &lt;img src="http://dev.iamvdo.me/newLogoCSS3create2.png" alt="CSS3Create logo" /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;svg height="0"&gt;
    &lt;!-- THE mask --&gt;
    &lt;mask id="mask-firefox"&gt;
      &lt;image width="150" height="64" xlink:href="http://dev.iamvdo.me/newLogoCSS3create2.png" filter="url(#filter)" /&gt; 
    &lt;/mask&gt;
    
    &lt;!-- the filter to make the image white --&gt;
    &lt;filter id="filter"&gt;
      &lt;feFlood flood-color="white" /&gt;
      &lt;feComposite in2="SourceAlpha" operator="in" /&gt;
    &lt;/filter&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>