CSS動畫未播放

我試圖從底部的CSS3動畫向此網站中的<main>元素添加一張幻燈片，但動畫未播放/發生。CSS動畫未播放

任何想法爲什麼？

這裏是鏈接到它是不會發生的頁面：https://dl.dropboxusercontent.com/u/270523/help/animate/new.html

這裏是動畫的CSS：

.animated{ 
    -webkit-animation-fill-mode:both; 
    -moz-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    -o-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    -ms-animation-duration:1s; 
    -o-animation-duration:1s; 
    animation-duration:1s; 
} 
@-webkit-keyframes bounceInUp { 
0% { 
    opacity: 0; 
    -webkit-transform: translateY(2000px); 
} 
    60% { 
    opacity: 1; 
    -webkit-transform: translateY(-30px); 
} 
80% { 
    -webkit-transform: translateY(10px); 
} 
100% { 
    -webkit-transform: translateY(0); 
    } 
} 
@-moz-keyframes bounceInUp { 
0% { 
    opacity: 0; 
    -moz-transform: translateY(2000px); 
} 

60% { 
    opacity: 1; 
    -moz-transform: translateY(-30px); 
} 

80% { 
    -moz-transform: translateY(10px); 
} 

100% { 
    -moz-transform: translateY(0); 
    } 
} 

@-o-keyframes bounceInUp { 
0% { 
    opacity: 0; 
    -o-transform: translateY(2000px); 
} 

60% { 
    opacity: 1; 
    -o-transform: translateY(-30px); 
} 

80% { 
    -o-transform: translateY(10px); 
} 

100% { 
    -o-transform: translateY(0); 
    } 
} 

@keyframes bounceInUp { 
0% { 
    opacity: 0; 
    transform: translateY(2000px); 
} 

60% { 
    opacity: 1; 
    transform: translateY(-30px); 
} 

80% { 
    transform: translateY(10px); 
} 

100% { 
    transform: translateY(0); 
    } 
} 

.bounceInUp { 
-webkit-animation-name: bounceInUp; 
-moz-animation-name: bounceInUp; 
-o-animation-name: bounceInUp; 
animation-name: bounceInUp; 
}

來源

2013-04-30 Irfan Mir

不是一個答案，只是幾個註釋：**＃1 **您不需要'-ms-'前綴的動畫。 IE9根本不支持動畫，IE10支持它們沒有前綴。 '-ms-'前綴只用於* early * IE10預覽，但後期預覽和最終的IE10支持前綴不足的動畫。 **＃2 **爲什麼不使用簡寫，並將動畫設置在同一個類上，而不是將它分成兩個相同元素的類？另外，你可以做一個減少的測試用例嗎？ – Ana 2013-04-30 17:35:59

@Ana +1 [縮小測試用例]（http://css-tricks.com/reduced-test-cases/） – bookcasey 2013-04-30 17:46:19

@Ana兩個有效點。謝謝。當我在JS Fiddle中嘗試它時，它工作正常，在這裏：http://jsfiddle.net/5hshn/2/，但不是當我在我的完整實現中嘗試它時。 – 2013-04-30 17:56:35

在您的HTML代碼，輸入了錯誤的位置：

<link rel="stylsheet" href="animate.css" type="text/css">

這是"stylesheet"！

來源

2013-04-30 19:05:35 5argon

哇，我認爲這是一個拼寫錯誤，但我找不到它。謝謝你指出。 – 2013-04-30 19:55:38

CSS動畫未播放

回答

相關問題