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;
ul
should not be in ap
seconds or milliseconds
. Default value is 0, which means that no animation will occur