Длинное CSS анимация ослабление (background-position) - PullRequest
Новая
       13

Длинное CSS анимация ослабление (background-position)

2 голосов
/ 01 апреля 2019

Я пытаюсь плавно анимировать положение фонового изображения с помощью CSS в течение более длительного периода, скажем, 60 секунд: 

#movingbackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bigsurflowers.jpg/1280px-Bigsurflowers.jpg');
  overflow: hidden;
  background-position: left center;
  animation: zoomin 60s ease-in infinite;
}

@-webkit-keyframes zoomin {
  0% { background-position: 0% center; transform: scale(1.0); }
  50% {background-position: 100% center; transform: scale(1.2); }
  100% { background-position: 0% center; transform: scale(1.0); }
}
@keyframes zoomin {
  0% { background-position: 0% center; transform: scale(1.0); }
  50% {background-position: 100% center; transform: scale(1.2); }
  100% { background-position: 0% center; transform: scale(1.0); }
}
<div id="movingbackground"></div>

Небольшие движения в начале и в конце «прыгают» на несколько пикселей каждую секунду, вместо того, чтобы двигаться медленно (может зависеть от размера экрана).

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

Вот и Скрипка .

Ответы [ 2 ]

2 голосов
/ 02 апреля 2019

Анимация background-position заставляет браузер выполнять компоновку, рисование и компоновку.
Перекомпоновка и перерисовка сильно загружают процессор и вызывают «скачок».

Вместо этого вы можетепримените свой фон к псевдоэлементу (или используйте <img> в вашем HTML) и анимируйте его свойство transform, используя 3d-преобразование.

Это заставит браузер использовать графический процессор для анимации, и анимация будет работать в композициифаза довольно плавная.

См. фрагмент ниже: 

html,
body {
  margin: 0;
  padding: 0
}

#movingbackground {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#movingbackground:before {
  content: '';
  position: absolute;
  top: 0; left: 0; z-index: -1;
  height: 100%;
  width: 200%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bigsurflowers.jpg/1280px-Bigsurflowers.jpg) 0 50% / cover;
  animation: zoomin 60s ease-in infinite;
}

@keyframes zoomin {
  50% {
    transform: translateX(-50%) scale(1.2)
  }
}
<div id="movingbackground"></div>
1 голос
/ 01 апреля 2019

Я провел некоторое тестирование и пришел к выводу, что, вероятно, невозможно .(По крайней мере с переходами или анимациями )

Проблема заключается в том, как браузеры отображают изображения на экране.Пиксели изображения, по-видимому, выровнены с пикселями вашего экрана.

Таким образом, изображение всегда "скачет" ровно по одному пикселю за раз.

Это означает, чточто чем больше пикселей у вас на изображении, тем больше шагов оно сделает.Но при использовании ease-in он всегда будет заикаться в начале.


Как мне кажется, я видел, как этот эффект работает плавно где-то

Это, вероятно, не было реализовано с помощью CSS.

...