<p>'Play' and 'reverse' an animation</p>
<div class="wrapper">
<button id="start">Play</button>
<button id="reverse">Reverse</button>
<div id="box"></div>
</div>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background: #ccc;
}
.wrapper {
position: relative;
top: 2.52em;
width: 21.7em;
height: 100%;
margin: 0 auto;
}
p {
font: lighter 24px "Helvetica Neue", sans-serif;
color: #222;
letter-spacing: 2px;
margin: 15px 0 0 0;
padding: 0;
}
#box {
position: relative;
top: 40px;
width: 50px;
height: 50px;
margin: 0 auto;
border: 1px solid #333;
border-radius: 15px;
}
#start, #reverse {
margin: 0;
}
(function () {
var box = document.getElementById('box'),
start = document.getElementById('start'),
reverse = document.getElementById('reverse');
start.addEventListener('click', function() {
var player = box.animate([{
transform: 'rotate(0deg)' + 'scale(1.0)'
}, {
transform: 'rotate(180deg)' + 'scale(1.4)'
}, {
transform: 'rotate(360deg)' + 'scale(1.0)'
}
], {
duration: 1000,
iterations: 1
});
reverse.addEventListener('click', function() {
player.reverse();
}, false);
}, false);
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.