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动画未播放

回答

相关问题