css - 私のアニメーションは 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');}
}