<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';
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.