title: Css3 animation infinite running zoom Effect
body: <p>I need a help.
  I want to animate the background image with the css3 below is what I am trying to do. </p>
  
  <p>Its not working. Can anyone please guide me where I am lacking.</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>div.top {
      width: 100%;
      float: left;
      position: relative;
      background: #000000;
      overflow: hidden;
      height:500px
  }
  
  div.top:before {
      background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px;
      content: "";
      display: inline-block;
      height: 100%;
      opacity: 0.49;
      position: absolute;
      top: 0;
      width: 100%;
      /*z-index: -1;*/
      animation: 50s ease 0s normal none infinite running zoomEffect;
      -webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
      -o-animation: 50s ease 0s normal none infinite running zoomEffect;
      -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
      transform: scale(1, 1) translate(0px, 0px);
      -webkit-transform: scale(1, 1) translate(0px, 0px);
      -moz-transform: scale(1, 1) translate(0px, 0px);
   -o-transform: scale(1, 1) translate(0px, 0px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top"&gt;Animate background image here&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks.</p>