我的动画仅适用于Chrome和Safari，但不适用于IE或Firefox

Question

我添加了所有前缀但仍无效？ 它就像一个幻灯片，使用css将背景更改为不同的图像。 我不明白是什么问题我看了一遍100次。 您可以在http://steveedwin.com/

上看到它

html{
max-width:1000px;
}
#slideshow{

background-image: url('1.jpg') ;
background-repeat:no-repeat;
background-size: 70% 350px;
width:100%;
height: 300px;
animation:myfirst 30s linear 1s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 30s linear 1s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 30s linear 1s infinite alternate;
/* Opera: */
-o-animation:myfirst 30s linear 1s infinite alternate;
}
@keyframes myfirst
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}

@-o-keyframes myfirst /* Opera */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}