jquery - 每 15 秒复制一次 div 并为其添加动画

Question

我有一个选取框，我想重复它，但是我第一次运行动画时它只运行一次，因为我希望它从中间开始，然后我想复制那个包装器，包括所有内容然后对其应用新动画，我想每 15 秒克隆一次，使其作为选取框重复出现

setTimeout( function(){ 
  $('.wrapper').clone().addClass('wrapper2').insertAfter('.marquee');
        
        $('.wrapper2').css('-webkit-animation','second 30s infinite linear');
        $('.wrapper2').css('-moz-animation','second 30s infinite linear');
        $('.wrapper2').css('-o-animation','second 30s infinite linear');
        $('.wrapper2').css('animation','second 30s infinite linear');
        
    }  , 15000 );

    @-webkit-keyframes scroll{
        0%{-webkit-transform: translate(-24%,0);}
        100%{-webkit-transform: translate(-100%,0);}
    }

    // Second animation to add to the clone wrapper every 15 seconds
    @-webkit-keyframes second{
       0%{-webkit-transform: translate(0,0);}
       100%{-webkit-transform: translate(-100%,0);}
    }

    .wrapper{
       display: inline-block;
       padding-left: 100%;
       -webkit-animation:scroll 25s 1 linear;
       -moz-animation:scroll 25s 1 linear;
       -o-animation:scroll 25s 1 linear;
       animation:scroll 25s 1 linear;
       background-color: brown;
       height: 50px;
       width: 50px;
    }      

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="marquee">
        <div class="wrapper">
            <!-- <div class="date"></div>-->
            <div class="pueblatemp"></div>
            <div class="warlotemp"></div>
            <div class="difference"></div>
            <div class="time"></div>
        </div>
    </div>

Answer 1

如果您希望动画无限运行，则不需要 jQuery 来实现。您可以像下面使用 animation-iteration-count 的代码一样使用纯 CSS。

Please note that there will a blank area in the container as a result of the marquee moving. This can be solved using jQuery.

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translate(-24%, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}
// Second animation to add to the clone wrapper every 15 seconds
@-webkit-keyframes second {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}
.wrapper {
  display: inline-block;
  padding-left: 100%;
  -webkit-animation: scroll 25s 1 linear;
  -moz-animation: scroll 25s 1 linear;
  -o-animation: scroll 25s 1 linear;
  animation: scroll 25s 1 linear;
  background-color: brown;
  animation-iteration-count: infinite; /* Infinite loop (you can also set any number of iteriations that you want*/
  height: 50px;
  width: 50px;
}

<div class="marquee">
  <div class="wrapper">
    <!-- <div class="date"></div>-->
    <div class="pueblatemp"></div>
    <div class="warlotemp"></div>
    <div class="difference"></div>
    <div class="time"></div>
  </div>
</div>

此外，如果您不需要支持 < IE10，则无需使用供应商前缀(-webkit、-moz 和 -o)，因为所有主流浏览器都支持 animation属性(property)。