As a part of the Web Animations spec, Chrome 39 has added a set of playback control features which, for example, makes it possible to pause(), and reverse() web animations. Interesting of course, and since I’ve written a post where I played around with the element.animate() function I had to give this a try as well.
But please note that this isn’t a tutorial and the demo might contain errors since it’s created in experimental purpose.
Basically what I’ve done is an animation that you can play and reverse. Make sure that you are using Chrome 39+ when you view the demo.
Demo
JS
(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);
})();