CSS3 Анимация, не работающая в Firefox или Internet Explorer

Я пытаюсь создать простую анимацию, в которой изображение исчезает, исчезает и исчезает бесконечно. Пока что он работает только в Chrome и Safari, но не в Firefox и Internet Explorer. Вот мой CSS код:CSS3 Анимация, не работающая в Firefox или Internet Explorer

header #slider{ 
     background:url(images/slider/128bridge.jpg); 
     background-repeat:no-repeat; 

     -webkit-animation-name:headerAnimation; 
     -webkit-animation-duration:40s; 
     -webkit-animation-iteration-count:infinite; 
     -webkit-animation-timing-function:linear; 

     -moz-animation-name:headerAnimation; 
     -moz-animation-duration:40s; 
     -moz-animation-iteration-count:infinite; 
     -moz-animation-timing-function:linear; 

     -ms-animation-name:headerAnimation; 
     -ms-animation-duration:40s; 
     -ms-animation-iteration-count:infinite; 
     -ms-animation-timing-function:linear; 

     -o-animation-name:headerAnimation; 
     -o-animation-duration:40s; 
     -o-animation-iteration-count:infinite; 
     -o-animation-timing-function:linear; 

     animation-name:headerAnimation; 
     animation-duration:40s; 
     animation-iteration-count:infinite; 
     animation-timing-function:linear; 
    } 

    @-webkit-keyframes headerAnimation{ 
      0%  {background-image:url(images/slider/128bridge.jpg);} 
      20%  {background-image:url(images/slider/128bridge.jpg);} 
      25%  {background-image:url(images/slider/Caboose.jpg);} 
      45%  {background-image:url(images/slider/Caboose.jpg);} 
      50%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      70%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      75%  {background-image:url(images/slider/Drover_250W.jpg);} 
      95%  {background-image:url(images/slider/Drover_250W.jpg);} 
      100% {background-image:url(images/slider/128bridge.jpg);} 
     } 

     @-moz-keyframes headerAnimation{ 
      0%  {background-image:url(images/slider/128bridge.jpg);} 
      20%  {background-image:url(images/slider/128bridge.jpg);} 
      25%  {background-image:url(images/slider/Caboose.jpg);} 
      45%  {background-image:url(images/slider/Caboose.jpg);} 
      50%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      70%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      75%  {background-image:url(images/slider/Drover_250W.jpg);} 
      95%  {background-image:url(images/slider/Drover_250W.jpg);} 
      100% {background-image:url(images/slider/128bridge.jpg);} 
     } 

     @-ms-keyframes headerAnimation{ 
      0%  {background-image:url(images/slider/128bridge.jpg);} 
      20%  {background-image:url(images/slider/128bridge.jpg);} 
      25%  {background-image:url(images/slider/Caboose.jpg);} 
      45%  {background-image:url(images/slider/Caboose.jpg);} 
      50%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      70%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      75%  {background-image:url(images/slider/Drover_250W.jpg);} 
      95%  {background-image:url(images/slider/Drover_250W.jpg);} 
      100% {background-image:url(images/slider/128bridge.jpg);} 
     } 

     @-o-keyframes headerAnimation{ 
      0%  {background-image:url(images/slider/128bridge.jpg);} 
      20%  {background-image:url(images/slider/128bridge.jpg);} 
      25%  {background-image:url(images/slider/Caboose.jpg);} 
      45%  {background-image:url(images/slider/Caboose.jpg);} 
      50%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      70%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      75%  {background-image:url(images/slider/Drover_250W.jpg);} 
      95%  {background-image:url(images/slider/Drover_250W.jpg);} 
      100% {background-image:url(images/slider/128bridge.jpg);} 
     } 

     @keyframes headerAnimation{ 
      0%  {background-image:url(images/slider/128bridge.jpg);} 
      20%  {background-image:url(images/slider/128bridge.jpg);} 
      25%  {background-image:url(images/slider/Caboose.jpg);} 
      45%  {background-image:url(images/slider/Caboose.jpg);} 
      50%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      70%  {background-image:url(images/slider/CivilWarReenactment_250W.jpg)} 
      75%  {background-image:url(images/slider/Drover_250W.jpg);} 
      95%  {background-image:url(images/slider/Drover_250W.jpg);} 
      100% {background-image:url(images/slider/128bridge.jpg);} 
    }

источник

2015-08-12 bigBangAlpha1

Можете ли вы привести рабочий пример, используя Embeded StackOverflow Snippet или, в лучшем случае, JSFiddle (или поместите свой код в другое место), чтобы мы могли его протестировать? –

Вы можете увидеть этот код в действии на следующем веб-сайте: http://temp.srrl-rr.com/ – bigBangAlpha1

Из этого answer

Согласно candidate recommendation spec (9 сентября 2014), background-image определяется как не анимируемым.

Затем Firefox только после спецификации, и поведение браузеров , которые оживляют background-image является нестандартным и не следует полагаться на .

Может попробовать реализовать что-то подобное - Simple jQuery image crossfade

источник

2015-08-12 18:04:30 simon

Спасибо за отзыв. Теперь анимация работает во всех основных веб-браузерах. – bigBangAlpha1

background-image переход изначально поддерживается с помощью Chrome, Opera и Safari, но не в Firefox или IE.
Ваш лучший вариант - либо использовать псевдоэлементы, либо <div>, и анимировать непрозрачность.

источник

2015-08-12 18:04:31

CSS3 Анимация, не работающая в Firefox или Internet Explorer

ответ

Смежные вопросы