title: Webkit keyframes not working on safari or chrome
body: <p>I have been trying to find a solution on how i can get my safari browser to apply the animation using CSS3. I have already declared webkit on my css to make work on chrome or safari. In mozilla it animates perfectly but in safari/chrome it only makes the texts appear</p>
  
  <p>Here is the fiddle(<a href="http://jsfiddle.net/clestcruz/azSCP/1/" rel="nofollow">http://jsfiddle.net/clestcruz/azSCP/1/</a>) and below is the code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="animation"&gt;
      &lt;div&gt;a&lt;/div&gt;
      &lt;div&gt;n&lt;/div&gt;
      &lt;div&gt;i&lt;/div&gt;
      &lt;div&gt;m&lt;/div&gt;
      &lt;div&gt;a&lt;/div&gt;
      &lt;div&gt;t&lt;/div&gt;
      &lt;div&gt;e&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.animation div{
      float:left; 
      text-transform:uppercase; 
      font-size:80px;
      display:inline; 
      margin-right:5px;
      visibility:hidden
  }
  
  .animate_letters{
      -moz-animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;
      -webkit-animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;
      animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;
      visibility:visible !important
  }
  
  @keyframes fancytext{
    from {
      transform: scale(0) translateX(-40%); opacity:0;
      -webkit-transform: scale(0) translateX(-40%); opacity:0;
    }
  
    to {
      transform: scale(1) translateX(0%); opacity:1;
      -webkit-transform: scale(0) translateX(-40%); opacity:1;
    }
  
  }
  
  @-webkit-keyframes fancytext{
    from {
      transform: scale(0) translateX(-40%); opacity:0;
      -webkit-transform: scale(0) translateX(-40%); opacity:0;
    }
  
    to {
      transform: scale(1) translateX(0%); opacity:1;
      -webkit-transform: scale(0) translateX(-40%); opacity:1;
    }
  
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
  
      $('.animation div').each(function(ii){
          var data = $(this);
          setTimeout( function () {
              $(data).addClass('animate_letters')
          }, ii * 100);
      })
  })
  &lt;/script&gt;
  </code></pre>