CSSの変数とアニメーション

Question

私は、複数行のスプライトCSSアニメーション（http://codepen.io/simurai/pen/vmhuJ）を作成しようとしていましたが、Firefoxはbackground-position-xまたは-yをサポートしていません。

-x/-yの欠如は、ここで詳細に議論されている：https://bugzilla.mozilla.org/show_bug.cgi?id=550426、と提案された解決策（background-position-y doesn't work in Firefox (via CSS)?）は最近、Firefoxで導入されたCSS変数を、使用することです。

ただし、アニメーションのCSS変数の更新はサポートされていません。@keyframesがサポートされていますか？ここで

... 
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変数を間違って使用するか、単純にアニメーションをサポートしないのですか？実際に（Firefoxでまだない）Chromeで動作します

更新フィドル

編集

： http://jsfiddle.net/phoj0kq5/1/

Answer 1

これは解決策ではありませんが、回避策は助けるべきである：

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

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

ので、画像ファイル形式のサブ画像のレイアウトを変更：

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

へ：

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

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