如何在循环中连续滑动这些div

Question

我想使用css动画向上滑动一些div。它向上滑动，但问题在于它不是连续的，就像第一个div会从最后一个div结尾处开始。

Here is the Link to my codes.

:: HTML ::

<div id="image_slider_right"> 


      <div id="sliderup" > 
       <figure > 
        <div class="img_up" > 


         <div class="divimgslideup_txt" > 
          <strong>Nullam mauris velit</strong> 
          <p>tincidunt sit amet lectus non, iaculis interdum lectus. Fusce aliquam vitae magna...<a href="">details </a></p> 
         </div> 
        </div> 

        <div class="img_up"> 
         <div class="divimgslideup_txt"> 
          <strong>Interdum et malesuada </strong> 
          <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque <a href="">details </a> </p> 
         </div> 
        </div> 

        <div class="img_up"> 
         <div class="divimgslideup_txt"> 
          <strong>vitae ullamcorper</strong> 
          <p> Vivamus facilisis quam eleifend, mollis dolor id, faucibus risus...<a href="">details </a> </p> 
         </div> 
        </div> 

        <div class="img_up"> 


         <div class="divimgslideup_txt"> 
          <strong>Sed nec porttitor</strong> 
          <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque <a href="">details </a> </p> 
         </div> 
        </div> 

        <div class="img_up"> 


         <div class="divimgslideup_txt"> 
          <strong>Great Location</strong> 
          <p>Tucked away from the Dallas hustle, relax and know that everything you need is only minutes away </p> 
         </div> 
        </div> 

       </figure> 

:: CSS ::

#image_slider_right 
    { width:440px; float:left; position:relative; height:380px; margin-top:10px;margin-bottom:10px;} 

    div#sliderup { overflow: hidden; position:relative;height:100%; margin-left:10px; width:98%;} 

    div#sliderup figure .img_up { width: 98%;height:100%; float: left; margin-bottom:10px; position:relative; min-width:270px;} 

    div#sliderup figure 
    { position: relative; width: 98%; margin: 0; text-align: left; animation: 20s mymove infinite; } 

    .divimgslideup_txt 
    { float:left; width:99%; background:#E0DBD5; margin-left:5px; position:relative;font-size:13px; } 

    /* Chrome, Safari, Opera */ 
    @-webkit-keyframes mymove { 
     0% { top: 0%; } 
     20% { top: -0%; } 
     25% { top: -20%; } 
     45% { top: -25%; } 
     50% { top: -45%; } 
     70% { top: -50%; } 
     75% { top: -70%; } 
     90% { top: -75%; } 
     100% { top: -100%; } 
    } 

    /* Standard syntax */ 
    @keyframes mymove { 
     0% { top: 0%; } 
     20% { top: -0%; } 
     25% { top: -20%; } 
     45% { top: -25%; } 
     50% { top: -45%; } 
     70% { top: -50%; } 
     75% { top: -70%; } 
     90% { top: -75%; } 
     100% { top: -100%; } 
    } 

如何解决？

Answer 1

有一个简单的方法来达到它。只需复制<figure>...</figure>并在</figure>后面追加即可。并记住让关键帧0％看起来像100％。通过你的手，Jsfiddle

1. 复制粘贴&：

   也许你可以使用一个方法去实现它。

2. 使用服务器端添加本节。
3. 使用JavaScript来追加这部分，demo with jQuery。