title: Duplicate div every 15 seconds and add an animation to it
body: <p>I have a marquee and I want to repeat it, but the first time that i run the animation it runs only one time, becouse i want it to start in the middle, then i want to duplicate that wrapper, with all the content and then apply a new animation to it, i want to clone it every 15 seconds, to make it repeat as a marquee</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    @-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;
      }      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;div class="marquee"&gt;
          &lt;div class="wrapper"&gt;
              &lt;!-- &lt;div class="date"&gt;&lt;/div&gt;--&gt;
              &lt;div class="pueblatemp"&gt;&lt;/div&gt;
              &lt;div class="warlotemp"&gt;&lt;/div&gt;
              &lt;div class="difference"&gt;&lt;/div&gt;
              &lt;div class="time"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>