Замедлить фоновую анимацию CSS?

Как замедлить эту анимацию и сделать ее более плавной для всех браузеров? Есть ли какой-нибудь способ?

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

<div id = "animate-area"></div>

Просто для пояснения: мне не нужно знать, как исправить изображение, чтобы отцентрировать его или что-то еще, я просто хотел бы исправить подобное изображение для фона на своем личном сайте.

— 11.03.2019 23:56

можно поточнее? дело только во времени? если да, то у нас много дубликатов

— 12.03.2019 00:01

Если вы испытываете отставание, я бы рекомендовал не анимировать фоновую позицию, а использовать преобразование для перевода div.

— 12.03.2019 00:01

css html

11.03.2019 23:53

Приемы 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 сценарий полностью изменился.

508

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

Ответы 1

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

Просто дайте animation большую продолжительность.

Следующее изменяет его с 10s на 30s:

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 30s linear infinite alternate;
}