Блог

История

Я пытаюсь добиться непрерывной анимации прокрутки в <ul> теге, который содержит список изображений, выровненных по горизонтали, с помощью простой анимации ключевых кадров CSS, что-то вроде старого тега HTML <marquee> . Меня устраивает непрерывная бесконечная повторяющаяся прокрутка или стиль «туда-сюда», подобный animation-direction: alternate (это то, что я сделал).

HTML

 <div>
  <ul>
    <li>
      <img src="img1.jpg" alt="">
    </li>
    <li>
      <img src="img2.jpg" alt="">
    </li>
    <li>
      <img src="img3.jpg" alt="">
    </li>
  </ul>
</div>
  

CSS

 ul {
    position: absolute;
    left: 0;
    list-style: none;
    padding: 0;
    padding-left: 2rem;
    margin: 0;
    display: inline-flex;
    transform: translateX(0);
    animation: animation1 20s linear infinite;
    animation-direction: alternate;
}

li {
    height: 6rem;
    margin: 1rem;
    box-shadow: 0px 0px .5rem rgba(0, 0, 0, .2);
    width: 15rem;
    border-radius: .5rem;
    padding: .5rem;
    box-sizing: border-box;
    line-height: 7rem;
}

img {
    max-height: 100%;
    max-width: 100%;
}

@keyframes animation1 {
    from {
        left: 0;
        transform: translateX(0);
    }
    to {
        left: 100%;
        transform: translateX(-100%);
    }
}
  

Проблема

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