title: Link Not Working in CSS 3 animation
body: <p>I have implemented a <strong>CSS3 Animation</strong> for a Div-Element which has Header text and "Read more"-link. I'm using <code>translateX</code> function to animate the container from left to right of the screen.</p>
  
  <p>The problem is that the "Read more"-link which has an anchor goes to unclickable while the box animation. But when the animation ends the anchor becomes clickable. </p>
  
  <p>Can anyone help me finding the problem behind this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
    &lt;h3&gt;Title1&lt;/h3&gt;
    &lt;p class="sub-text"&gt;Title1 Desc &lt;/p&gt;
    &lt;p class="read-more"&gt;&lt;a href="#"&gt;Read More&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 27%;
    width: 62%;
    text-align: left;
    background: rgba(0,0,0, 0.6) none repeat scroll 0 0;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
  }
  div h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 3em;
    padding: 0 25px;
    margin: 30px 0px 5px 0px;
    color: rgba(255,255,255,0.8);
  }
  div p.sub-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    padding: 5px 25px;
    color: rgba(255,255,255,0.6);
    margin: 0px;
  }
  
  div p.read-more {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    padding: 10px 25px 20px; 
  }
  div p.read-more a {
    padding: 10px 10px 10px 20px;
    display: inline-block;
    background: rgb(223, 75, 20);
    text-decoration: none;
    color: rgba(255,255,255,0.6);
    margin: 0px;
    font-weight: 700;
  }
  
  titleAnimation { 
    0% {
      opacity: 0;
      -webkit-transform: translateX(300%);
    }
    8% {
      opacity: 1;
      -webkit-transform: translateX(10%);
    }
    17% {
      opacity: 1;
      -webkit-transform: translateX(5%);
    }
    19% {
      opacity: 0;
      -webkit-transform: translateX(-10%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
  }
  </code></pre>
  
  <p>Working Sample is
  <a href="http://jsfiddle.net/a4enq/" rel="nofollow">http://jsfiddle.net/a4enq/</a></p>