7

「複数行」のスプライト CSS アニメーションを作成しようとしていました (これに触発されました: http://codepen.io/simurai/pen/vmhuJ ) 。background-position-x-y

の欠如については、 https-x/-y ://bugzilla.mozilla.org/show_bug.cgi?id=550426 で詳細に説明されており、提案された解決策 ( background-position-y doesn't work in Firefox (via CSS)? ) は最近 Firefox に導入されたCSS 変数を使用します。

@keyframesただし、アニメーションからの CSS 変数の更新はサポートされていないようです。

...
background-position: var(--bgX) var(--bgY);
...

/*Here, CSS variables don't work:*/
@keyframes move-y {
  from {
    --bgY: 0px;
  }
  to {
    --bgY: -670px;
  }
}

ここに JSFiddle があります (注: Firefox のみ): http://jsfiddle.net/phoj0kq5/
アニメーションが実行されていることを確認するためだけに、アニメーションにちらつきの境界線を追加しましたが、カニは指を鳴らしません.. CSS を使用していますか?変数が間違っているか、単にアニメーションをサポートしていませんか?

編集

Chrome で実際に動作するフィドルを更新しました (まだ Firefox では動作しません): http://jsfiddle.net/phoj0kq5/1/

4

1 に答える 1

1

これは解決策ではありませんが、役立つはずの回避策です。

列と行が一度に 1 つずつ変化している場合、画像の一部を動的に表示することはできないため、画像パーツの 1 つの列または行のみを使用してみてください。

background-position: X 0;サブ画像が 1 行だけ使用されている場合、X が画像ごとのオフセットであるときに、表示される部分を設定できるはずです。これを実現するには、表示している画像ファイルを編集する必要があります。

したがって、画像ファイル形式のサブ画像のレイアウトを変更します。

☺☺☺☺
☺☺☺☺
☺☺☺☺

に：

☺☺☺☺☺☺☺☺☺☺☺☺

前述したように、これは問題自体の解決策ではなく回避策ですが、すべてのブラウザーで正常に動作するはずです。ただし、Mozilla は -x/-y 属性を実装するか、アニメーションの CSS 変数の問題を修正する必要があります。それまでは、これに対する適切な解決策がわかりません。

于 2015-11-09T10:57:38.873 に答える