html - 如何在循环中连续滑动这些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%。

也许你可以用一种方式到达它:

1. 亲手复制粘贴，Jsfiddle .
2. 使用服务器端附加此部分。
3. 使用 javascript 附加此部分，demo with jQuery .