Как установить время анимации до бесконечности с помощью CSS - PullRequest
Новая
       37

Как установить время анимации до бесконечности с помощью CSS

0 голосов
/ 22 октября 2018

Я хочу прокрутить весь контент dom снизу вверх, пока контент не будет полностью отрисован, но я столкнулся с проблемой синхронизации анимации, поскольку он рендерил контент до 10 секунд, и начинал снова с вершины, что не является моим сценарием использования.. 

/* Make it a marquee */
.marquee {
  width: 150px;
  margin: 0 auto;
  display:block;
  height:300px;
  white-space: nowrap;
  box-sizing: border-box;
  animation: marquee 10s linear infinite;    
}

.marquee:hover {
  animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
  0%   { margin-top: 150%; }
  100% { margin-top: -150% }
}

/* Make it pretty */
.microsoft {
  padding-left: 1.5em;
  position: relative;
  font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

/* ::before was :before before ::before was ::before - kthx */
.microsoft:before, .microsoft::before {
  z-index: 2;
  content: '';
  position: absolute;
  top: -1em; left: -1em;
  width: .5em; height: .5em;
  box-shadow: 1.0em 1.25em 0 #F65314,
          1.6em 1.25em 0 #7CBB00,
          1.0em 1.85em 0 #00A1F1,
          1.6em 1.85em 0 #FFBB00;
}



/* Style the links */
.vanity {
  color: #333;
  text-align: center;
  font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a, .microsoft a {
  color: #1570A6;
  transition: color .5s;
  text-decoration: none;
}

.vanity a:hover, .microsoft a:hover {
  color: #F65314;
}
<div style="position:relative;">

  <p class="microsoft marquee">
    <ul>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
      <li>asdfa</li>
    </ul>
  </p>
</div>

Как уже упоминалось, время анимации -s 10 с, поэтому оно длится всего 10 секунд, поэтому, пожалуйста, предоставьте мне любой способ выполнить его, пока весь мой Dom не будет обработан.т.е. установлен без ограничений.Именно эта строка: 

animation: marquee 10s linear infinite;
...