Как сделать бесконечную анимацию

Как вы можете сделать анимацию движущегося изображения, которая не останавливается, а зацикливается, когда достигает конца экрана и начинается с другого конца? Пример гифки:

введите здесь описание изображения


react-native animation react-native-animatable
person Michael Metreveli    schedule 20.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашем примере это выглядит как многослойность изображений. Это будет сложно из-за z-индексации и изображений png без фона.

По сути, бесконечно повторяющаяся анимация будет примерно такой:

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url("http://placehold.it/1600x800") repeat 0 0;
  background-size: auto 100%;
  animation: animatedBackground 10s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -3200px 0; /* image width X 2 */
  }
}

person Moshe Harush    schedule 20.12.2020