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;
}
答
在您的HTML代码,输入了错误的位置:
<link rel="stylsheet" href="animate.css" type="text/css">
这是"stylesheet"
!
+0
哇,我认为这是一个拼写错误,但我找不到它。谢谢你指出。 – 2013-04-30 19:55:38
不是一个答案,只是几个注释:**#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