It has come to my attention that the marquee tag is deprecated in html5. I am trying to create a news headline display that scrolls automatically, starting from the top news and slowly moving upwards. Once the last news item disappears, the first one should seamlessly append to the last, creating a continuous flow. I want this to loop endlessly. However, my current code starts with a blank div and the news items pour in from the bottom, leaving a noticeable gap between the last and first headlines. How can I achieve the desired effect?:-
Below is the code snippet:
#mid_section_2{
border-top:3px solid black;
border-bottom:3px solid black;
border-right:1px dotted black;
border-left:1px dotted black;
background-color:white;
overflow:hidden;
height:200px;
}
#mid_section_2 h5{
border:1px solid black;
}
#up{
padding-top:100%;
padding-left:5%;
padding-right:5%;
animation-name: myanimate;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:linear;
}
@keyframes myanimate{
from{transform:translate(0,0)}
to{transform:translate(0,-100%)}
}<div id="mid_section_2">
<div id="up">
<a href="#"><h6>EU officials sees end of the road for diesel cars.</h6></a>
<h6>Tata expects combined sales output of 850,000 units by next FY.</h6>
<h6>Maruti Dzire AMT accounts for 17% of total sales.</h6>
<h6>EESL to roll out 1,000 electric cars to Maharashtra government</h6>
<h6>Tata expects combined sales output of 850,000 units by next FY.</h6>
<h6>Maruti Dzire AMT accounts for 17% of total sales.</h6>
<h6>EESL to roll out 1,000 electric cars to Maharashtra government</h6>
</div>
</div>