title: How to test if browser support keyframe stepped animation?
body: <p>I've found that the browser that runs on ios simulator / xcode ios simulator on Mac OSX version 6.1 (10B141) doesn't show my stepped curved animation, the following:</p>
  
  <p><a href="http://jsbin.com/lebum/1/edit" rel="nofollow">http://jsbin.com/lebum/1/edit</a></p>
  
  <p>By using Modernizr, I can test for cssanimation, but the truth is, the following works fine:</p>
  
  <pre><code>.balance {
      animation-name: balance;
      -webkit-animation-name: balance;    
  
      animation-duration: 0.8s;   
      -webkit-animation-duration: 0.8s;
  
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
  }
  
  @-webkit-keyframes balance {
      0% {
          -webkit-transform: rotate(0deg);   
      }
      50% {
          -webkit-transform: rotate(4deg);
      }
      100% {
          -webkit-transform: rotate(0deg);   
      }                       
  }
  </code></pre>
  
  <p>I also noticed that, by doing the animation differently using percentage stages like the previous example (but not like the stepped animation that I want to achieve using from and to):</p>
  
  <p><a href="http://jsbin.com/muyeguba/4/" rel="nofollow">http://jsbin.com/muyeguba/4/</a></p>
  
  <ul>
  <li>even thought the animation is not exactly what I want, it's supported on ios safari. If I could figure if to and from is supported, would be awesome</li>
  </ul>
  
  <p>I've not runned a new test, changing to and from, to 0% and 100% instead, but the issue is the same. Nothing appears on screen:</p>
  
  <p><a href="http://jsbin.com/lebum/3/" rel="nofollow">http://jsbin.com/lebum/3/</a></p>
  
  <p>Which, leads me to believe that the only way around this, is to target this browser by using javascript and checking the browser agent ?</p>
  
  <p>So, by running the following:</p>
  
  <pre><code>alert("User-agent header sent: " + navigator.userAgent);
  </code></pre>
  
  <p>I get:</p>
  
  <pre><code>Mozilla/5.0 (iPad: CPU OS 6_1 like Mac OS X) AppleWebKi/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B141 Safari/8536.25
  </code></pre>
  
  <p>Any hints on how to target the lack of support for this type of animation ?</p>
  
  <p>Thank you!</p>