2

アニメーション キーフレームと background-image プロパティを使用して、正方形のスプライト (n 行 xm 列) をアニメーション化しています。Chrome、FF、Safari では正常に動作しますが、IE 9 と 10 では完全に機能しません。

ここに少しの CSS (SASS を使用):

include keyframes(animation) {
    @for $i from 0 through 45 {
        $line : floor($i/9);
        $col : $i%9;
        $s : 20.03+($i * 14)/45 + "%";
        @if $i != 45 { #{$s}{background-position: ($col * -163px) ($line * -107px);};}
    }
}

IE でこれを修正するにはどうすればよいですか?

4

1 に答える 1

4

CSS3 アニメーションをサポートしていないため、IE9 では完全に壊れています。

IE10 では次の 2 つの理由で壊れています。

  1. -ms-IE10 以降では、アニメーション プロパティにプレフィックス を使用することは想定されていないためです。
  2. 0IE10 には、アニメーションで値がbackground-position正しく 使用されないバグがあるため:

0パート 2 を修正するには、 likeに近い値を使用できます0.1。

したがって、代わりに次の CSS を使用します。

#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; } 
}

ここでJSFiddle。

于 2013-10-28T19:47:05.157 に答える