Как сделать так, чтобы анимация CSS работала бесконечно?

Question

Я пытаюсь сделать infinte анимацию, но в какой-то момент она, похоже, возвращается к началу.

Вот код

h1 {
  background: url(Pepesad.png) repeat-x;
  width: 90%;
  margin: 1em auto;
  max-width: 600px;
  height: 512px;
  animation: flybirds 1s linear infinite;
}

@keyframes flybirds {
  from {
    background-position: 0px 0px
  }
  to {
    background-position: 300px 0px
  }
}

Answer 1

Некоторые из правил CSS, которые вы упомянули для h1, кажутся вам ненужными. Упоминание ширины дает анимации меньше места. Подумайте над тем, чтобы предоставить h1 контейнер / упаковщик и установить для него подходящую ширину.

h1 {
    background: url(Pepesad.png) repeat-x;
    height: 512px;
    width: 5076px;
    animation: flybirds 1s linear infinite;
}

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

@keyframes flybirds {
    from {
        background-position: 0px 0px
    }

    to {
        background-position: -100% 0px
    }
}

Еще одна альтернатива, которую вы можете использовать:

 @keyframes flybirds {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-1692px, 0, 0);
    }
}

Примечание: причина, по которой я предлагаю использовать дополнительное, а не анимировать background-position на h1, так что мы можем использовать анимированное преобразование, чтобы сделать движение, которое является гораздо более производительным.