CSS3動畫無法在谷歌瀏覽器工作

我有一個動畫，直到幾個星期前在谷歌瀏覽器工作。我什麼也沒有改變，突然之間停止了工作。我問過幾個我認識的人，他們也在做網站，沒有人真的能給我一個直接的答案，說明爲什麼動畫不能工作。CSS3動畫無法在谷歌瀏覽器工作

我在網站上有一個下降的假動畫，當你點擊它落在的葉子上。根據瀏覽器，圖像會「下降」（如果您將鼠標懸停在開發人員工具中的鏈接標記上，您可以看到藍色框落下），但實際圖像保持放置狀態或僅在屏幕上放下幾個像素。我不知道爲什麼會發生這一切令人困惑。

所以它應該如何去做的是：用戶點擊葉子，jquery改變類，並且葉子動畫被觸發使葉子看起來像下降。

@-webkit-keyframes fallingLeaves { 
0% { 
    opacity: 1; 
    -webkit-transform: translate(0, 10px) rotateZ(0deg); 
    -moz-transform: translate(0, 10px) rotateZ(0deg); 
    -ms-transform: translate(0, 10px) rotateZ(0deg); 
    -o-transform: translate(0, 10px) rotateZ(0deg); 
    transform: translate(0, 10px) rotateZ(0deg); 
    z-index: 100; 
} 
75% { 
     opacity: 1; 
     -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
     -moz-transform: translate(100px, 600px) rotateZ(270deg); 
     -ms-transform: translate(100px, 600px) rotateZ(270deg); 
     -o-transform: translate(100px, 600px) rotateZ(270deg); 
     transform: translate(100px, 600px) rotateZ(270deg); 
     z-index: 100; 
} 
100% { 
     opacity: 0; 
     -webkit-transform: translate(150px, 800px) rotateZ(360deg); 
     -moz-transform: translate(150px, 800px) rotateZ(360deg); 
     -ms-transform: translate(150px, 800px) rotateZ(360deg); 
     -o-transform: translate(150px, 800px) rotateZ(360deg); 
     transform: translate(150px, 800px) rotateZ(360deg); 
     z-index: 100; 
}

}

這是葉子上的動畫之一（有不同的動畫讓葉秋不同）。

如果任何人都可以幫助我，那就太棒了。我試了很多，問了很多人，什麼都沒有。由於

的網站，這是位於這樣你就可以檢查出來是www.shearmadnesshoboken.com

我應該注意的是，動畫確實在谷歌瀏覽器在Linux上工作。我也認爲它在所有Safari瀏覽器中都能正常工作，但其中一片葉片正確落在那裏（爲什麼只有其中一片不落在我身上，但是是的）。

來源

2012-08-25 eric

適合我。在「加載」和「點擊」時，「Home」葉子和邊界框都會下降，直到離開屏幕。在它離開屏幕後，它重新設置到舊的位置。（Chrome 21.） – Eric

我昨天剛剛更新了它，因此可能是您看到其中一些工作正常的原因。我不認爲團隊工作，但我可能是錯的 – eric

這看起來像一個瀏覽器的bug。檢查您的Linux版本是否與您的（Mac？）版本相同。我找到的解決方法是在第一個關鍵幀中刪除rotateZ(0deg)（您並不需要指定）。

0% { 
    opacity: 1; 
    -webkit-transform: translate(0, 10px); 
    -moz-transform: translate(0, 10px); 
    -ms-transform: translate(0, 10px); 
    -o-transform: translate(0, 10px); 
    transform: translate(0, 10px); 
    z-index: 100; 
}

來源

2012-08-25 07:47:43 Duopixel

不知道爲什麼，但第一個只能有一個參數。其他兩個可以有兩個，但它只能在0％部分使用一個參數。奇怪，但讓他們工作有點謝謝。 – eric

此問題已在Chrome 23中修復（當前可用作金絲雀版本）。 –

CSS3動畫無法在谷歌瀏覽器工作

回答

相關問題