Скорость прокрутки динамической анимации в CSS - PullRequest
Новая
       8

Скорость прокрутки динамической анимации в CSS

0 голосов
/ 21 сентября 2018

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

мой css 

   .horizontal.scroll .list_rail {
    animation: scrollX 15s infinite linear
  }

Я предполагаю, что это должно быть что-то вроде 

.horizontal.scroll .list_rail {
    animation: scrollX calc(15s + $('ul#list li').length) infinite linear
  }

1 Ответ

0 голосов
/ 21 сентября 2018

возможно использовать <marquee> тег. 

 <marquee direction=right>
  <ul id="addList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</marquee>

<button onClick="add()">ADD li</button>

css 

li{
  background: dodgerblue;
  color: #fff;
  padding: 10px;
  margin: 3px;
}

ul{
  display:flex;
  list-style:none;
  flex-direction:row-reverse; 
}

script 

function add(){
  var ul = document.getElementById('addList');
  var li = document.createElement('li');
  li.innerHTML = 'other text';
  ul.appendChild(li)
}

codepen

...