Блог

Главная - Вопросы по программированию - Замедляет фоновую анимацию CSS?

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

#css #html

#css #HTML

Вопрос:

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

 @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>

Комментарии:

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

2. не могли бы вы выразиться точнее? дело только во времени? если это так, у нас есть множество дубликатов

3. Если вы испытываете задержку, я бы рекомендовал не анимировать background-position, а использовать transform для перевода div.

Ответ №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;
}  
 <div id="animate-area"></div>