element.animate()

by c_vilander

HTML

<div id="box"></div>

<!-- Click the box to start the animation -->

CSS

body {
    padding: 40px;
}

#box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 15px;
    background: #222;
}

JavaScript

(function () {
    "use strict";

    var box = document.getElementById('box');

    box.onclick = function () {

        box.animate([{
            transform: 'rotate(0deg)' + 'scale(1.0)'
        }, {
            transform: 'rotate(180deg)' + 'scale(1.4)'
        }, {
            transform: 'rotate(360deg)' + 'scale(1.0)'
        }

        ], {
            duration: 3000,
            iterations: 5
        });

    };

})();