爲什麼CSS3動畫在與CSS3轉換結合使用時行爲奇怪？

查看this fiddle查看我的意思或查看此代碼的示例。爲什麼CSS3動畫在與CSS3轉換結合使用時行爲奇怪？

<a href="/">test</a> 

a{ 
    background-color:#ccc; 
    transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
} 
a:hover{ 
    background-color:#888; 
} 

a{ 
    -moz-animation-duration: 3s; 
    -moz-animation-name: move; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: alternate; 
} 

@-moz-keyframes move { 
    from { 
     margin-left: 0px; 
    } 

    to { 
     margin-left: 50px; 
    } 
    }

動畫偶爾跳躍約或改變速度，特別是當你將鼠標懸停在它...我已經嘗試運行其自己的動畫（不限定的過渡），它運行順利，按預期。我已經自己進行了轉換，並按預期工作。這種組合似乎會導致問題。

可能是Firefox的執行錯誤？我正在運行Firefox 6.0.1，Ubuntu 11.04。

來源

2011-09-02 Spycho

在我的瀏覽器中正常工作嗎？ Firefox 6.0.1 Win 7 pro。 –

這可能是Linux版本的Firefox特定的錯誤呢？ – Spycho

您需要用'背景'替換'all'。然後它工作正常。我想當你懸停時，它會轉換所有樣式，所以當前餘量保留到新餘量左邊，這是相同的，所以保證金在轉換期間不會改變。之後，動畫再次優先，您會看到跳躍。

來源

2011-09-02 16:02:39 Gerben

爲什麼CSS3動畫在與CSS3轉換結合使用時行爲奇怪？

回答

相關問題