CSS變量和動畫

我試圖製作一個「多行」sprite CSS動畫（insipred by this：http://codepen.io/simurai/pen/vmhuJ），結果發現Firefox不支持background-position-x或-y。CSS變量和動畫

缺乏-x/-y在長度這裏討論：https://bugzilla.mozilla.org/show_bug.cgi?id=550426和所提出的解決方案（background-position-y doesn't work in Firefox (via CSS)?）是使用CSS 變量，這是最近在Firefox推出。

但是，它看起來不像是從動畫更新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變量錯誤，還是他們根本不支持動畫？

編輯

更新撥弄它實際上在Chrome的工作（還沒有在Firefox）：http://jsfiddle.net/phoj0kq5/1/

來源

2015-10-07 Sphinxxx

css變量規範討論了自定義屬性關於動畫的行爲（請參見[§2.1]（http://www.w3.org/TR/css-variables-1/#syntax）和[§3 ]（http://www.w3.org/TR/css-variables-1/#using-variables）），但由於我對動畫不太熟悉，我無法進一步評論。 – BoltClock

@BoltClock - 謝謝，這是很好的信息。我真的不明白他們在說什麼，但「被污染」聽起來不太有希望...... – Sphinxxx

您使用scss作爲變量使用http://sass-lang.com/guide – lyndact

這不是一個解決方案，但解決方法應該有所幫助：

，因爲你不能當cols和rows每次只改變一個時，動態顯示圖像的一部分，嘗試只使用一列或一行圖像部分。

當只使用一行子圖像時，您應該能夠使用background-position: X 0;設置查看部分，而X是每張圖像的偏移量。您將需要編輯您顯示的圖像文件才能實現此目的。

因此改變子圖像的佈局中的圖像文件格式：

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

到：

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

正如我所說的，這不是問題本身，而要解決此問題的解決方案，但它應該在所有瀏覽器上正常工作。但是，Mozilla應該在動畫中實現-x/-y屬性或修復CSS變量問題。在此之前，我沒有看到適當的解決方案。

來源

2015-11-09 10:57:38 Karkan

謝謝！是的，這可以讓你做精靈動畫，但真正的問題是如何在動畫中使用新的CSS變量。對不起，如果不明確。 – Sphinxxx

是的，我在那裏做的真的只是一個解決方法，因爲動畫導致變量的這種問題。我認爲這是Mozilla相關的問題，他們應該修復它。只要他們不解決這個問題，解決方法應該沒問題，但它需要圖像編輯技巧並需要額外的時間。我很抱歉 – Karkan

CSS變量和動畫

回答

相關問題