0

I want to scroll my whole content of the dom from bottom to top till the content is rendered completely but I faced the problem of timing of animation as it rendered the content till 10s and start again from the top which is not my usecase.

/* 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>

As mentioned the animation time -s 10s so it runs for only 10seconds so please provide me any way to execute it till my whole Dom rendered. i.e set to no limit. It's this line in particular:

animation: marquee 10s linear infinite;
10
  • 1
    Please add the relevant html aswell and make it a working code snippet
    – SuperDJ
    Commented Oct 22, 2018 at 9:02
  • @SuperDJ I've attached the html code as well and thanks for the suggestion.
    – Nitin
    Commented Oct 22, 2018 at 9:50
  • 1
    The HTML markup is invalid. A ul should not be in a p
    – SuperDJ
    Commented Oct 22, 2018 at 9:57
  • the infinite keyword you provided on the animation only helps you to play the existing animation over and over . It didn't make the animation to play until the bottom of the page
    – abhndv
    Commented Oct 22, 2018 at 10:06
  • animation duration specifies the length of time an animation should take to complete one cycle. This can be specified in seconds or milliseconds. Default value is 0, which means that no animation will occur
    – Suryan
    Commented Oct 22, 2018 at 11:51

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.