<div class="container">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>

<button class="toggleAnim">Start Animation</button>

<p class="p">Demo by Artem Tabalin. <a href="http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations" target="_blank">See article</a>.</p>
body {
  padding: 30px;
  text-align: center;
}

.container {
  position: relative;
  min-height: 400px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}

.ball:nth-last-child(1) {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/splogo.png');
  background-position: center center;
  background-repeat: no-repeat;
}

.ball-running {
  animation: run-around 4s infinite;
}

@keyframes run-around {
  0%: {
    transform: translate(0, 0);
  }
  
  25% {
    transform: translate(200px, 0);
  }
  
  50% {
    transform: translate(200px, 200px);
  }
  
  75% {
    transform: translate(0, 200px);
  }
}

.toggleAnim {
  height: 40px; 
  width: 300px; 
  font-size: 2em;
}

.p {
  font-size: 13px;
  padding-top: 100px;
}
var toggleAnim = document.querySelector('.toggleAnim');
var balls = document.getElementsByClassName('ball');

var animating = false;

toggleAnim.addEventListener('click', function(e) {
  animating = !animating;
  toggleAnim.textContent = animating ? 'Stop Animation' : 'Start Animation';
  
  Array.prototype.forEach.call(balls, function(ball) {
    ball.className = animating ? 'ball ball-running' : 'ball';
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.