CSS3變形動畫

我的CSS3動畫似乎沒有在Chrome中工作。我還有其他動畫正在我的頁面上工作。有什麼我失蹤或等等？這裏是我的代碼：CSS3變形動畫

@keyframes upToDown { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(100%); } 
} 
@-webkit-keyframes upToDown { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(100%); } 
} 

@keyframes downToUp { 
    0% { transform: translateY(100%); } 
    100% { transform: translateY(0); } 
} 

@-webkit-keyframes downToUp { 
    0% { transform: translateY(100%); } 
    100% { transform: translateY(0); } 
} 

.hide{ 
animation: upToDown 1s forwards; 
-webkit-animation: upToDown 1s forwards; 
-webkit-transform: translateY(100%); 
    transform: translateY(100%); 
} 
.visible{ 
animation: downToUp 1s forwards; 
    -webkit-animation: downToUp 1s forwards; 
-webkit-transform: translateY(0); 
    transform: translateY(0); 
}

來源

2013-11-03 Shreyas

什麼是不工作？你沒有解釋這個問題。請用你的代碼製作一個jsFiddle，這樣我們就可以看到它是如何使用的 –

根據[此MDN頁面]（https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes），Chrome需要供應商前綴。換句話說，'@ -webkit-keyframes'。另外，如果你想支持去年的Firefox和Opera，可以使用'-moz-'和'-o-'。 –

這是行不通的，因爲你需要-webkit-transform例如爲：

@-webkit-keyframes downToUp { 
0% { -webkit-transform: translateY(100%); } 
100% { -webkit-transform: translateY(0); } 
}

和

@-webkit-keyframes upToDown { 
0% { -webkit-transform: translateY(0); } 
100% { -webkit-transform: translateY(100%); } 
}

來源

2013-11-03 18:40:38 Markasoftware

回答

相關問題