Совместимость браузера css Firefox не работает

Question

Я работаю над новым сайтом, но когда мой друг протестировал его на Firefox, одна из функций не работала.

Мы обнаружили, что CSS не работает в Firefox, но работает в Chrome.

Весь код: https://jsfiddle.net/wvkL6d2b/

Мы пытались -webkit- и -ms-

 #separator{      width: 10px!important; max-width: 60px!important; height: 10px; background:red;}

  @keyframes in-out {
         from { width: 10px;
        }
              10%, 100% {
                  width: 60px;
              }
        to{ width: 60px; }
    }
  #separator {
        animation-name: in-out;
      animation-duration: 8s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-delay: 2s;
      }

Я пытаюсь заставить его работать в обоих браузерах

Answer 1

В свойствах CSS, которые вы написали, так много ошибок.Пожалуйста, найдите обновленный код здесь в fiddle .Предполагается, что это свойства для использования.

 #separator {
   height: 10px;
   background: red;
   -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
 }

@-webkit-keyframes mymove {
  0% { width: 10px; }
  100% { width: 100px; }
}

/* Standard syntax */
@keyframes mymove {
  0% { width: 10px; }
  100% { width: 100px; }
}

Answer 2

Это не работает, потому что вы объявили неправильное свойство.

Декларация, которая вам нужна для Firefox - это просто анимация. Только Chrome и Safari нуждаются в префиксе -webkit- для этого эффекта CSS3.

Итак, ваш код будет:

-webkit-animation:slideshow 21s infinite;

animation:slideshow 21s infinite;

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