title: CSS3 animation not working in safari
body: <p>I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code:</p>
  
  <p>HTML  </p>
  
  <pre><code>&lt;div class="right"&gt;
      &lt;div class="key-arm"&gt;&lt;img src="images/landing/key-arm.png" alt="arm" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS  </p>
  
  <pre><code>.landing .board .right {
      width: 291px;
      height: 279px;
      background: url('../images/landing/key-pnl.png');
      bottom: 16px;
      right: 250px;
      position: absolute;
  }
  .landing .board .right .key-arm {
      position: absolute;
      left: 44px;
      top: 18px;
      width: 41px;
      height: 120px;
  }
  
  
  
  /*=== Key Arm Animation ===*/
  @-webkit-keyframes keyarm {
      0% { -webkit-transform: rotate(0deg); }
      5% { -webkit-transform: rotate(-14deg); }
      10% { -webkit-transform: rotate(0deg); }
  }
  
  @-moz-keyframes keyarm {
      0% { -moz-transform: rotate(0deg); }
      5% { -moz-transform: rotate(-14deg); }
      10% { -moz-transform: rotate(0deg); }
  }
  
  @-ms-keyframes keyarm {
      0% { -ms-transform: rotate(0deg); }
      5% { -ms-transform: rotate(-14deg); }
      10% { -ms-transform: rotate(0deg); }
  }
  
  @-o-keyframes keyarm {
      0% { -o-transform: rotate(0deg); }
      5% { -o-transform: rotate(-14deg); }
      10% { -o-transform: rotate(0deg); }
  }
  
  @keyframes keyarm{
      0% { transform: rotate(0deg); }
      5% { transform: rotate(-14deg); }
      10% { transform: rotate(0deg); }
  }
  
  
  .right .key-arm{
      -webkit-transform-origin: 12px 105px;
         -moz-transform-origin: 12px 105px;  
          -ms-transform-origin: 12px 105px;  
           -o-transform-origin: 12px 105px;  
              transform-origin: 12px 105px;  
  
     -webkit-animation: keyarm 8s ease-in-out 0s infinite;
        -moz-animation: keyarm 8s ease-in-out 4s infinite;
         -ms-animation: keyarm 8s ease-in-out 4s infinite;
          -o-animation: keyarm 8s ease-in-out 4s infinite;
             animation: keyarm 8s ease-in-out 0s infinite;
  }
  </code></pre>
  
  <p>Ok this doesn't work in Safari as I said, there's no movement whatsoever.<br>
  Also, still and only in Safari, the key-arm div shows only if you resize the screen! It's there in the DOM but for some reason it doesn't show up!<br>
  What am I doing wrong?</p>
  
  <p>Thanks<br>
  Mauro</p>
  
  <p>UPDATE: Ok from your answers I got that @keyframes is not supported on Safari 4. It's strange because on the same page I have an animation that works using @keyframes!</p>
  
  <p>here's the CSS code:</p>
  
  <pre><code>.board .rays{
      background: url("../images/landing/rays.gif") no-repeat 0 0 red;
      height: 381px;
      left: 251px;
      opacity: 1;
      top: 80px;
      width: 408px;
      position: absolute;
  }
  
  .board .bottle{
      background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
      bottom: 30px;
      height: 405px;
      left: 276px;
      width: 357px;
      z-index: 1;
      position:absolute;
  }
  
  /*=== Rays Animation ===*/
  @-webkit-keyframes rays{
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @-moz-keyframes rays{
      0% { -moz-transform: rotate(0deg); }
      100% { -moz-transform: rotate(360deg); }
  }
  
  .board .rays{
     -webkit-animation: rays 40s linear 0s infinite;
     -moz-animation: rays 40s linear 0s infinite;
     animation: rays 40s linear 0s infinite;
  }
  </code></pre>
  
  <p>And the html:  </p>
  
  <pre><code>&lt;div class="board"&gt;
      &lt;div class="rays"&gt;&lt;/div&gt;
      &lt;div class="bottle"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Try it yourself in jsFiddle (if you have Safari 4) and you'll see </p>