Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It's totally broken in IE9, because it does not support CSS3 animations:</p> <ul> <li><a href="http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx#animations" rel="nofollow noreferrer">http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx#animations</a></li> </ul> <p>It's broken in IE10 for two reasons:</p> <ol> <li>Because you're not supposed to use the <code>-ms-</code> prefix for animation properties in IE10 and above: <ul> <li><a href="http://msdn.microsoft.com/library/ie/hh772212.aspx" rel="nofollow noreferrer">http://msdn.microsoft.com/library/ie/hh772212.aspx</a></li> <li><a href="http://msdn.microsoft.com/en-US/library/ie/hh772747.aspx" rel="nofollow noreferrer">http://msdn.microsoft.com/en-US/library/ie/hh772747.aspx</a></li> </ul></li> <li>Because IE10 has a bug where it doesn't use <code>0</code> values for <code>background-position</code> correctly in animations: <ul> <li><a href="https://stackoverflow.com/questions/15280791/why-doesnt-this-css-animation-work-in-ie10">Why doesn&#39;t this CSS animation work in IE10?</a></li> </ul></li> </ol> <p>To fix part 2, you can use a value close to <code>0</code> like <code>0.1</code>.</p> <p><strong>Thus use this CSS instead:</strong></p> <pre><code>#ball { background-image: url('http://i.imgur.com/pKnpIzd.png'); width: 133px; height: 170px; position: absolute; top: 150px; left: 280px; z-index: 2; -webkit-animation: ball 10s infinite ; -webkit-animation-timing-function: step-start; animation: ball 10s infinite ; animation-timing-function: step-start; } /* WEBKIT VERSION */ @-webkit-keyframes ball { 16% { background-position: 0px 0px; } 16.49296% { background-position: -133px 0px; } 16.98592% { background-position: -266px 0px; } 17.47887% { background-position: -399px 0px; } 17.97183% { background-position: -532px 0px; } 18.46479% { background-position: -665px 0px; } 18.95775% { background-position: -798px 0px; } 19.4507% { background-position: -931px 0px; } 19.94366% { background-position: 0px -170px; } 20.43662% { background-position: -133px -170px; } 20.92958% { background-position: -266px -170px; } 21.42254% { background-position: -399px -170px; } 21.91549% { background-position: -532px -170px; } 22.40845% { background-position: -665px -170px; } 22.90141% { background-position: -798px -170px; } 23.39437% { background-position: -931px -170px; } 23.88732% { background-position: 0px -340px; } 24.38028% { background-position: -133px -340px; } 24.87324% { background-position: -266px -340px; } 25.3662% { background-position: -399px -340px; } 25.85915% { background-position: -532px -340px; } 26.35211% { background-position: -665px -340px; } 26.84507% { background-position: -798px -340px; } 27.33803% { background-position: -931px -340px; } 27.83099% { background-position: 0px -510px; } 28.32394% { background-position: -133px -510px; } 28.8169% { background-position: -266px -510px; } 29.30986% { background-position: -399px -510px; } 29.80282% { background-position: -532px -510px; } 30.29577% { background-position: -665px -510px; } 30.78873% { background-position: -798px -510px; } 31.28169% { background-position: -931px -510px; } 31.77465% { background-position: 0px -680px; } 32.26761% { background-position: -133px -680px; } 32.76056% { background-position: -266px -680px; } 33.25352% { background-position: -399px -680px; } 33.74648% { background-position: -532px -680px; } 34.23944% { background-position: -665px -680px; } 34.73239% { background-position: -798px -680px; } 35.22535% { background-position: -931px -680px; } 35.71831% { background-position: 0px -850px; } 36.21127% { background-position: -133px -850px; } 36.70423% { background-position: -266px -850px; } 37.19718% { background-position: -399px -850px; } 37.69014% { background-position: -532px -850px; } 38.1831% { background-position: -665px -850px; } 38.67606% { background-position: -798px -850px; } 39.16901% { background-position: -931px -850px; } 39.66197% { background-position: 0px -1020px; } 40.15493% { background-position: -133px -1020px; } 40.64789% { background-position: -266px -1020px; } 41.14085% { background-position: -399px -1020px; } 41.6338% { background-position: -532px -1020px; } 100% { background-position: -532px -1020px; } } /* STANDARDS-COMPLIANT VERSION */ @keyframes ball { 16% { background-position: 0.1px 0.1px; } 16.49296% { background-position: -133px 0.1px; } 16.98592% { background-position: -266px 0.1px; } 17.47887% { background-position: -399px 0.1px; } 17.97183% { background-position: -532px 0.1px; } 18.46479% { background-position: -665px 0.1px; } 18.95775% { background-position: -798px 0.1px; } 19.4507% { background-position: -931px 0.1px; } 19.94366% { background-position: 0.1px -170px; } 20.43662% { background-position: -133px -170px; } 20.92958% { background-position: -266px -170px; } 21.42254% { background-position: -399px -170px; } 21.91549% { background-position: -532px -170px; } 22.40845% { background-position: -665px -170px; } 22.90141% { background-position: -798px -170px; } 23.39437% { background-position: -931px -170px; } 23.88732% { background-position: 0.1px -340px; } 24.38028% { background-position: -133px -340px; } 24.87324% { background-position: -266px -340px; } 25.3662% { background-position: -399px -340px; } 25.85915% { background-position: -532px -340px; } 26.35211% { background-position: -665px -340px; } 26.84507% { background-position: -798px -340px; } 27.33803% { background-position: -931px -340px; } 27.83099% { background-position: 0.1px -510px; } 28.32394% { background-position: -133px -510px; } 28.8169% { background-position: -266px -510px; } 29.30986% { background-position: -399px -510px; } 29.80282% { background-position: -532px -510px; } 30.29577% { background-position: -665px -510px; } 30.78873% { background-position: -798px -510px; } 31.28169% { background-position: -931px -510px; } 31.77465% { background-position: 0.1px -680px; } 32.26761% { background-position: -133px -680px; } 32.76056% { background-position: -266px -680px; } 33.25352% { background-position: -399px -680px; } 33.74648% { background-position: -532px -680px; } 34.23944% { background-position: -665px -680px; } 34.73239% { background-position: -798px -680px; } 35.22535% { background-position: -931px -680px; } 35.71831% { background-position: 0.1px -850px; } 36.21127% { background-position: -133px -850px; } 36.70423% { background-position: -266px -850px; } 37.19718% { background-position: -399px -850px; } 37.69014% { background-position: -532px -850px; } 38.1831% { background-position: -665px -850px; } 38.67606% { background-position: -798px -850px; } 39.16901% { background-position: -931px -850px; } 39.66197% { background-position: 0.1px -1020px; } 40.15493% { background-position: -133px -1020px; } 40.64789% { background-position: -266px -1020px; } 41.14085% { background-position: -399px -1020px; } 41.6338% { background-position: -532px -1020px; } 100% { background-position: -532px -1020px; } } </code></pre> <p><a href="http://jsfiddle.net/SombreErmine/5LKYF/4/" rel="nofollow noreferrer">JSFiddle here.</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload