Css совместимость с браузером firefox не работает

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

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

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

Мы старались -вебкит- и -мс-

 #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;
      }

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

css browser

10.04.2019 11:32

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

Таким образом, ваш код будет:

-webkit-animation:slideshow 21s infinite;

animation:slideshow 21s infinite;

Ссылка:http://www.w3schools.com/css3/css3_animations.asp

Спасибо за быстрый ответ, но он не работает. У меня уже есть такой же код (jsfiddle.net/wvkL6d2b)

— 10.04.2019 11:41

Это неверно, анимация — это просто шорткод для других свойств.

— 10.04.2019 11:43

10.04.2019 11:36

Ответ принят как подходящий

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

 #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; }
}

10.04.2019 11:45

Другие вопросы по теме

Kendo UI Jquery Grid не работает в IE 8

Date.now() возвращает значение в микросекундах, а не в миллисекундах

Можно ли читать локальное хранилище другого приложения в angular 2?

Есть ли способ управлять моим компьютером с помощью браузера

Есть ли способ динамически изменять размер браузера gecko в winforms С# с определенными спецификациями?

Вызов API в PWA в браузере Microsoft Edge не работает

Почему разрешения времени выполнения не работают в oreo 8.1.0 или версии пирога?

Как указать якорь, когда идентификатор фрагмента уже используется в URL-адресе?

Сайт Stackoverflow выглядит странным и устаревшим. Мой компьютер заражен или что?

Как браузеры управляют сеансовыми файлами cookie?

Css совместимость с браузером firefox не работает

Ответы 2

Другие вопросы по теме

Похожие вопросы