@keyframes在Firefox中不起作用

嗯，喂。我正在玩CSS3的@keyframes属性，并且动画在Firefox中似乎不起作用。有人可以告诉我我的代码有什么问题吗？@keyframes在Firefox中不起作用

谢谢！

#slideshow{ 
    height : 150px; 
    width : 190px; 
    animation:slideshow 21s infinite; 
    -webkit-animation:slideshow 21s infinite; 
    -moz-animation:slideshow 21s infinite; 
} 



@keyframes slideshow{ 
    0% {background : url('1.jpg');} 
    14% {background : url('2.jpg');} 
    28% {background : url('3.jpg');} 
    42% {background : url('4.jpg');} 
    56% {background : url('5.jpg');} 
    70% {background : url('6.jpg');} 
    84% {background : url('7.jpg');} 
    100% {background : url('1.jpg');} 
} 

@-webkit-keyframes slideshow{ 
    0% {background : url('1.jpg');} 
    14% {background : url('2.jpg');} 
    28% {background : url('3.jpg');} 
    42% {background : url('4.jpg');} 
    56% {background : url('5.jpg');} 
    70% {background : url('6.jpg');} 
    84% {background : url('7.jpg');} 
    100% {background : url('1.jpg');} 
} 

@-moz-keyframes slideshow{ 
    0% {background : url('1.jpg');} 
    14% {background : url('2.jpg');} 
    28% {background : url('3.jpg');} 
    42% {background : url('4.jpg');} 
    56% {background : url('5.jpg');} 
    70% {background : url('6.jpg');} 
    84% {background : url('7.jpg');} 
    100% {background : url('1.jpg');} 
}

此外，动画在Chrome中完美运行。

来源

2013-07-10 Yolo Submarine

您是否尝试进入Firefox的工具菜单并查看错误控制台并查看是否有任何与CSS相关的警告/错误？ –

发布一个jsfiddle供大家点击！ –

这不起作用，因为您声明了错误的属性。

你需要的Firefox声明只是animation。只有Chrome和Safari需要使用-webkit-前缀才能实现此CSS3效果。

所以，你的代码是：

-webkit-animation:slideshow 21s infinite; 

animation:slideshow 21s infinite;

http://www.w3schools.com/css3/css3_animations.asp

来源

2013-07-10 17:18:04

据Mozilla虽然@keyframes支持它是目前不稳定，语法应该是什么样子，你已经有了，但工作动画他们在这里提供似乎避免使用简写来定义动画属性，并且它不使用-moz-animation前缀，而是仅使用@ -moz-keyframes并调用常规的“动画”属性;

https://developer.mozilla.org/samples/cssref/animations/cssanim1.html

他们的CSS是这样的：

h1 { 
    animation-duration: 3s; 
    animation-name: slidein; 
} 

@-moz-keyframes slidein { 
0% { 
    margin-left: 100%; 
    width: 300%; 
} 

100% { 
    margin-left: 0; 
    width: 100%; 
} 
}

也许你应该尝试

#slideshow { 
animation-name:slideshow; 
animation-duration:5s; 
animation-iteration-count:infinite; 
}

来源

2013-11-18 14:42:54 Saige

尝试增加背景：网址（ '1.JPG'）;到#slideshow元素CSS来初始建立它。这总是为我解决这个问题。 Firefox似乎需要一个特定的起点。

#slideshow{ 
background: url('1.jpg'); 
height : 150px; 
width : 190px; 
animation:slideshow 21s infinite; 
-webkit-animation:slideshow 21s infinite; 
-moz-animation:slideshow 21s infinite; 
}

来源

2014-12-09 00:19:26 matt127

@keyframes在Firefox中不起作用

回答

相关问题