CodePen

HTML

            
              Total: <span id="counter">1</span> <input type="button" onclick="addOne()" value="Add 1 box">  <input type="button" onclick="addTen()" value="Add 10 boxes">  <input type="button" onclick="addHundred()" value="Add 100 boxes">

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @keyframes box {
    0% {
        transform: translate3d(0, 0, 0);
        background-color: green;
    }

    100% {
        transform: translate3d(300px, 0, 0);
        background-color: blue;
    }
}


@-webkit-keyframes box {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        background-color: green;
    }

    100% {
        -webkit-transform: translate3d(300px, 0, 0);
        background-color: blue;
    }
}

.box {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    transform: translate3d(0, 0, 0);
    animation-name: box;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation-name: box;
    -webkit-animation-duration: 3s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    position: absolute;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              window.counter = 0;

window.addOne = function() {
    var el = document.createElement('div');
    el.classList.add('box');
    el.style.top = (30 + Math.random() * 200) + 'px';
    el.style.left = (30 + Math.random() * 200) + 'px';
    //el.style.borderColor = ['red', 'blue', 'green'][Math.floor(Math.random() * 3)];
    document.body.appendChild(el);
    ++counter;
    document.getElementById('counter').innerText = counter;
}

window.addTen = function() {
  for (var i = 0; i < 10; ++i) window.addOne();
}
    
window.addHundred = function() {
  for (var i = 0; i < 10; ++i) window.addTen();
}
    
  
setTimeout(addOne, 1000);

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................