css3 заголовки новостей с автопрокруткой вверх

Question

Так что шатер устарел в html5.Я написал код для заголовков новостей, который должен автоматически начинаться с верхних новостей, а затем медленно прокручиваться вверх.Как только последние новости пропали, первая должна присоединиться к последней и выглядеть как один непрерывный поток.Это должно повторяться постоянно.В настоящее время мой код начинается с пустого элемента div, а новости начинают поступать снизу.И есть разрыв между последними новостями и заголовком первых новостей.Как мне этого добиться?: -

Вот фрагмент кода:

#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>

Answer 1

Попробуйте это

$(function(){
  var tickerLength = $('.container ul li').length;
  var tickerHeight = $('.container ul li').outerHeight();
  $('.container ul li:last-child').prependTo('.container ul');
  $('.container ul').css('marginTop',-tickerHeight);
  function moveTop(){
    $('.container ul').animate({
      top : -tickerHeight
    },600, function(){
     $('.container ul li:first-child').appendTo('.container ul');
      $('.container ul').css('top','');
    });
   }
  setInterval( function(){
    moveTop();
  }, 3000);
  });

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:'tahoma', serif;
}
.container{
  width:260px;
  margin:20px auto;
  height:300px;
  background-color:#333;
  overflow:hidden;
}
ul{
  list-style:none;
  position:relative;
}
li{
  height:100px;
  background-color:rgba(57, 173, 117,0.3);
   text-align:center;
  border-bottom:1px solid #333;
}
h2{
  color:#fff;
  padding-top:10px;
}
p{
  text-align:left;
  padding:10px;
  color:#eee;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>
      <h2>Head line 1</h2>
      <p>News detail just a line jhghdsbd hsdssdhjhdjshdjsahdjs</p>
    </li>
    <li>
      <h2>Head line 2</h2>
      <p>News detail just a line jhghdsbd hsdssdhjhdjshdjsahdjs</p>
    </li>
    <li>
      <h2>Head line 3</h2>
      <p>News detail just a line jhghdsbd hsdssdhjhdjshdjsahdjs</p>
    </li>
    <li>
      <h2>Head line 4</h2>
      <p>News detail just a line jhghdsbd hsdssdhjhdjshdjsahdjs</p>
    </li>
   
    
  </ul>
</div>